标签:
css扩展技术是对css原生代码一种扩展,其中less和sass就是css扩展技术两种方式,通过扩展技术,可以使我们在写css代码时候,更加的方便和快捷。
首先要了解css扩展技术的含义;扩展技术并不是另外一种全新的技术,它是建立在css基础上进行扩展,实现一些css原生代码所不能实现的功能,其次less和sass不能单独在浏览器上运行,需要进行编译;
less能实现同js一样的变量、函数、混合参数等功能,通常用@标志开始,后面接变量名字,具体如实例:@winth、@color、@height等等,这就是代表一个变量;然后在css进行编译时候实现 div{color:red,p{font-size:10px .cls{width:@width;height:@height}};在css里就会显示出在css里显示会出div{};div p{};div p .cls{};在显示伪类时候less用&符号表示,例如:&:hover;&表示当前父元素;
sass是我们比较常用一个扩展技术,首先他在webstorm上无法直接编译,需要一款第三方软件进行编译我们一般常用的环境需求是基于Rubg;
sass后缀名版本:“sass”“scss”;区别是sass语法没有大括号,而scss有大括号;sass与less不同点还有使用sass需要先进行声明:@mini,然后接收时候需要有接收命令:@import; 变量声明:$+变量; 默认变量:需要在后面加上!default即可;
变量在less 和 sass的全部变量和局部变量不同
1. less当中变量是按需加载,需要时候全局搜索;
2. sass变量是从上到下加载;
3. 默认值在封装代码时候很有用;
特殊变量 #{} - 对里面东西进行转义
1. $border:top;
2. .border-#{$border}{color:$color}
less和sass最重要一点就是可以嵌套
1. 里面元素加冒号表示是元素一个属性, 不加冒号表示一个子元素
2. @at-root 跳出父元素
sass同less一样有css原生代码所不具有的特殊功能和用途,他也可以有继承、占位选择器%、函数 、运算、 判断、 三目运算符、for循环等等功能
总之,通过css扩展技术我们可以更快更高效完成css代码的工作,让我们的工作更加的简单和重复利用;
标签:
原文地址:http://www.cnblogs.com/gong-ping/p/4676673.html