LESS
参考资料:
LESS官网
w3cplus less入门教程
less的编译
$ npm install -g less
$ lessc styles.less
$ lessc styles.less > styles.css
在命令行中可以进行如上操作
我的 Mac一定是一定是抽风了!!!
$ npm install less
$ sudo npm install -g less
$ lessc style.less > styles.css
这样才可以
less特性及语法
变量——Variables
- 用@color来定义一些变量
- less中的变量只能定义一次,前后重复会被覆盖
- 变量可以进行计算
- 变量的范围Scope,向上就近原则,自身有就用自身的,自身没有就找父类中次变量
混入——Mixins
- 就像函数一样,可以额外定义一个类,类里面可以有选择的填写默认参数,应用到另一个类中
- 可以混入参数,这个与默认参数相比较来说的
- @arguments是一个很特殊的参数,相当于js中的arguments参数,可以先暂时替代实参
嵌套规则——Nested Rules
- 针对多层元素来说的,以前需要加上class或者id,要不然就是从高层一层一层的选择下来,现在可以进行less中的嵌套。
- &是一个很特殊的值,&指的是同一个元素或者伪类,没有&指的是后代元素
Functions & Operations
- Operations帮助css的属性,尤其是颜色,数字,属性进行四则运算的功能。
- Functions 中有Color Functions,<p style="color:red;">这个仍然不是太懂</p>
命名空间
- 经常使用某一段代码,要先封装起来,之后用『 > 』调用就可以了
Less的注解——Comments
- 注释和js中注释方式一样
客户端的使用——Client-side usage
- 先<link>导入你的less文件
- 之后用<script>导入一个名叫"less.js"的文件
- less.js文件下载地址
SASS
- 注意使用scss文件后缀
- 变量用$来定义
- 父选择器的标识符&
- 子组合选择器和同层组合选择器:>、+和~
- sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到
了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用。 - 混合器@mixin
- 静默注释
- @extend选择器继承