Fork me on GitHub

Less与Sass

发表于 | 分类于 |
字数统计: 2.5k | 阅读时长 ≈ 9 min

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

共性：

Mixins

混合，主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。

Parametric

带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments常量，然后将定义好的class A引入class B中。

Nested Rules

嵌套规则，指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量，并且增加了代码的可读性。

Operations

运算，在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。

Color function

颜色功能，颜色的函数运算，颜色会先被转化成HSL色彩空间，然后在通道级别操作。

Namespaces

命名空间，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用；

Scope

作用域，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作用域非常的相似；

Javascript evaluation

javascript的表达式，在Less或sass文件中可以使用js的表达式,用来赋值。

区别：

实现方式

实现方式不同。LESS是基于JavaScript运行，所以LESS是在客户端处理。Sass是基于Ruby的，是在服务器端处理的。

变量

LESS和Sass中的变量的唯一区别就是，LESS使用@，而Sass使用$。同时还有一些作用域上的差别。

输出设置

Less没有输出设置，Sass提供四种输出选项：nested, compact, compressed 和 expanded。默认为nested：

  • nested：嵌套缩进的css代码
  • expanded：展开的多行css代码
  • compact：简洁格式的css代码
  • compressed：压缩后的css代码

条件语句

Sass支持条件语句，可以使用if{}else{}，for{}循环等等。而Less不支持。

外部文件引用

scss引用的外部文件命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。Less引用外部文件和css中的@import没什么差异。

工具库

Sass有工具库Compass，Sass和Compass的关系有点像Javascript和jQuery的关系，Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap，Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

Sass

文件后缀名

sass有两种后缀名文件：一种后缀名为.sass，不使用大括号和分号；另一种是.scss文件，这种和css文件格式差不多，使用大括号和分号。建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开，如果值后面加上!default则表示默认值。

  • 普通变量：定义之后可以在全局范围内使用。

  • 默认变量：sass的默认变量仅需要在值后面加上!default即可。sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

  • 特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

  • 多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

    • List：list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等。
    • Map：map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3)。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等。

  • 全局变量：在变量值后面加上!global即为全局变量。

  • 目前变量机制：在选择器中声明的变量会覆盖外面全局声明的变量。

嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

  • 选择器嵌套：指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器。

  • 属性嵌套：所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

@at-root

用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

  • 多个参数mixin：调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

  • 多组值参数mixin：如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…。

  • @content：@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

占位选择器%：这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

函数

sass定义了很多函数可供使用，当然也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

条件判断及循环

  1. @if判断，可一个条件单独使用，也可以和@else结合多条件使用；
    三目判断，语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值；

  2. for循环：for循环有两种形式，分别为：@for $var fromthrough和@for $var fromto。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数；

  3. @each循环：语法为：@each $var in <\list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

参考

https://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html

https://www.cnblogs.com/coder-dumeng/p/4962223.html

https://www.w3cplus.com/sassguide/syntax.html

-------------完结撒花 -------------