css扩展“less和”sass“ -凯发k8官方网

　　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代码的工作，让我们的工作更加的简单和重复利用；

 

转载于:https://www.cnblogs.com/gong-ping/p/4676673.html

总结

以上是凯发k8官方网为你收集整理的css扩展“less和”sass“的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。