一、导语

  最近的战狼2好火爆啊,每天看战狼2的票房一路高飙,我估计比吴京还开心。看了这部戏的拍摄过程,除了敬佩就是踏实,是的,吴京是电影圈隔了这么久后能踏踏实实做电影的了,纯属个人见解,不喜请忽略。。。。。。。。。。。。。。。。。。。。。

  说道踏实,好吧,我要把基础给踩踩了,说说最简单的sass是怎么在html中运行的

二、正文(文中编辑器使用webstorm)

  1、创建项目untitlecl(如此随意,我连默认名都懒得改了,,,,,,,),再创建H5格式的html   textsass.html

  2、textsass.html

    引入sass的样式文件,注意引入时,要写.css的后缀名而不是.sass的后缀名

   

  3、创建sass格式的文件

  

  

  4、编写sass文件的样式

  

  5、控制台输入  sass common.sass  (common为sass文件的样式名)可在控制台上看到编译成功后的css文件

  

  6、将sass文件编译成css置放于项目中,可使用命令  sass common.scss common.css

  

  自动编译后生成在项目中结构如下:

  

  7、运行项目可看到效果

  

  

  8、我们不可能每次改某个样式,都要重新 sass common.scss common.css  一下吧,所以有个监听方法 sass --watch common.sass:common.css

  这样每次一修改样式,刷新下浏览器,就能看到最新的效果了。

  若是要监听整个项目的样式,则使用命令 sass --watch stylesheets/sass:stylesheets/css

  9、SASS提供四个编译风格的选项:

    1)、nested:嵌套缩进的css代码,它是默认值。

    2)、expanded:没有缩进的、扩展的css代码。

    3)、compact:简洁格式的css代码。

    4)、compressed:压缩后的css代码。

    一般生产环境中使用最后一个 sass --style compressed test.sass test.css

三、结尾

  边琢磨边写的,肯定有许多bug,欢迎指出

  

sass学习--在htm文件中使用的更多相关文章

  1. python学习:python文件中空格和换行符的捕获和文本文件的转存

    0. 背景 之前公司的项目中,需要在嵌入式系统中实现一个http的网页端内容,由于项目历史遗留问题,公司是采用的将html文件转成c语言头文件的方式,每次修改页面端都需要从新编译一下程序,非常的繁琐. ...

  2. C++学习——在C文件中调用C++文件中的函数

    1.CPP文件中的内容 #include "mytest.h" #include <iostream> using namespace std; int add(con ...

  3. Java学习-043-获取文件在目录中的路径

    我们在日常的电脑使用中,经常需要在当前目录或当期目录及其子目录中查找文件,并获取相应的文件路径名.在我们的自动化测试中,也经常需要确认文件在目录中是否成功生成或已存在,因而我写了一个小方法来实现. 获 ...

  4. Java学习-040-级联删除目录中的文件、目录

    之前在写应用模块,进行单元测试编码的时候,居然脑洞大开居然创建了一个 N 层的目录,到后来删除测试结果目录的时候,才发现删除不了了,提示目录过长无法删除.网上找了一些方法,也找了一些粉碎机,都没能达到 ...

  5. PE结构学习笔记--关于AddressOfEntryPoint位置在文件中怎么确定问题

    第一次学习PE结构,也不知道有没有更好的办法. 1.AddressOfEntryPoint 这个成员在OptionalHeader里面,OptionalHeader的类型是一个IMAGE_OPTION ...

  6. Linux学习_按时间顺序解压多个文件,搜索文件中的内容

    ls的结果按时间数据先排序,再取末尾5个文件,再调用tar命令 ls -1 | sort -u | tail -5 |xargs -n1 tar xzvf 利用grep命令从文件中搜索. grep - ...

  7. (转)MyBatis框架的学习(四)——Mapper.xml文件中的输入和输出映射以及动态sql

    http://blog.csdn.net/yerenyuan_pku/article/details/71893689 前面对MyBatis框架的学习中,我们对Mapper.xml映射文件多少有些了解 ...

  8. 深度学习tensorflow实战笔记(1)全连接神经网络(FCN)训练自己的数据(从txt文件中读取)

    1.准备数据 把数据放进txt文件中(数据量大的话,就写一段程序自己把数据自动的写入txt文件中,任何语言都能实现),数据之间用逗号隔开,最后一列标注数据的标签(用于分类),比如0,1.每一行表示一个 ...

  9. 将多个sass文件合并到一个文件中

    将多个sass文件合并到一个文件中 应用场景:制作angular npm包的时候,定义的一些全局样式,自定义主题色这类的情况下,多个scss文件会要合并成一个文件并写到dist文件里,发布到仓库中. ...

随机推荐

  1. pmap 命令详解

    通过查看帮助,返回了如下信息: Usage:  pmap [options] pid [pid ...] Options: -x, --extended              show detai ...

  2. 使用http -server 搭建本地简易文件服务器

    安装 npm install http-server -g 使用 1. cd project . 2. hs [pwd] -o, 默认是当前路径 ./ 3. 其他选项 -p Port to use ( ...

  3. 使用C语言和Java分别实现冒泡排序和选择排序

    经典排序算法--冒泡和选择排序法 Java实现冒泡排序 基本思想是,对相邻的元素进行两两比较,顺序相反则进行交换,这样,每一趟会将最小或最大的元素放到顶端,最终达到完全有序,首先看个动图: 我们要清楚 ...

  4. ssh项目访问路径及url请求书写

    在ssh项目中配置好Struts后,一般可以采用两种方式进行后台请求: 1.html形式,包括a标签,form表单,ajax等.此时的访问链接必须写全路径,可以是相对路径,也可以是绝对路径 相对路径方 ...

  5. localStorage和sessionStorage总结以及区别

    (1)兼容的手机和浏览器: (2)使用 .setItem( key, value)存键值数据 sessionStorage.setItem("key","value&qu ...

  6. php中常用的字符串查找函数strstr()、strpos()实例解释

    string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字 ...

  7. Chrome Extension in CLJS —— 搭建开发环境

    前言  磨刀不误砍柴工,本篇将介绍如何搭建Chrome插件的ClojureScript开发环境. 具体工具栈:vim(paredit,tslime,vim-clojure-static,vim-fir ...

  8. Python数据分析流程

    一.数据分析的步骤: 1.查看数据并提出问题 2.数据清洗 3.代码编写,提取出结果数据,并分析是否有异常数据,修改代码 4.根据数据选择合适的图表进行展示 5.根据图表小组讨论交流获得最终的结果 二 ...

  9. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  10. 关于form表单上传图片的一些记录

    jsp页面 <form class="form-horizontal" role="form" action="brandAction_addB ...