最好用的css辅助工具——SASS&LESS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最好用的css辅助工具——SASS&LESS相关的知识,希望对你有一定的参考价值。

 

前言

  首先,小编给大家解释一下什么是SCSS和LESS,Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compasss)有助于更好地组织管理样式文件,以及更高效地开发项目。

同样,Less 也是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

  我相信,在大家的心中会与这么一个疑问,css真的是属于我们程序猿的语言吗?因为它不需要逻辑,只需要像写作文一样就可以将一个静态页面给“写”出来。而且,在平时的css编译中,我想大家最在意的就是样式的权重吧。简单的样式还好,复杂样式那从根目录开始的辣末长的选择器真心让人不忍直视。所以,为了照顾我们程序猿那么懒得生物,大神们编译了SCSS和LESS。他们最大的优势就是可以将css进行类似于逻辑编译。

 

一、最常用的辅助工具——SCSS

虽然SASS和LESS同样为css辅助工具,但是大部分都比较喜欢使用SASS,想要知道原因,让小编给你解释!

 

1.1SCSS基本语法

 1、scss中的变量
  声明变量:$变量名:变量值;

 而且,在SCSS中,允许将变量嵌套在字符串中,但是变量必须使用   ${} 包裹

1 $width :100px;
2 $position:left;
3 #div1{
4     width: $width;
5     height: $width/10;
6     background-color: red;
7     border-#{$position}:10px solid yellow;
8 }

看到声明变量的$符,是不是觉得很熟悉?没错!jQuery中的获取节点使用的也是$。所以在大部分的网页编译中,大部分都使用scss,便是为了编译时更舒服。不会有使用两种语言的感觉。

  2、scss中的运算,会将单位进行运算,使用时需注意最终的单位是否正确。
  eg:10px * 10px =100 px*px;
 
  3、scss中的嵌套:选择器嵌套  属性嵌套  伪类嵌套

在scss的使用中,我们通常把选择器嵌套和伪类嵌套一起使用。因为这会极大地节省scss的代码量;

  ①选择器嵌套 ul{li{}}

  嵌套默认表示后代选择器,如果需要子代选择器,可以在选择器前加>;可以在选择器的{}中,使用&表示上一层的选择器。

  ②伪类嵌套: li{&:hover{}}
  在选择器的{}中,使用&配合伪类事件,可以表示当前选择器的伪类。
 

 1 section{
 2   
 3     background-color: #CCC;
 4     p{color: red;}
 5     ul{
 6         padding: 0px;
 7         li{
 8             list-style: none;
 9             &:hover{
10                 background-color:red;
11             }
12             font:{
13                 size:16px;
14                 weight:bold;
15                 family:"微软雅黑";
16                 style:"italic";
17             }
18         }
19         
20     }
21 }

 


 
  ③ 属性嵌套: font:{size:18px;}
   对于属性名有-分割为多段的属性,可以使用属性嵌套,属性名的前半部分必须紧跟一个:才能用{}包裹属性的后半部分。

1  font:{
2      size:16px;
3      weight:bold;
4       family:"微软雅黑";
5       style:"italic";
6  }

属性嵌套类似于声明一的对象;对象名为属性名-以前的名字;对象里面的键名为-以后的属性名;值为想要设置的值;

4、注释

//注释一:编译时不会被编译到css文件中
/*
 注释二:在非compressed压缩模式下,会被编译到css文件中。
 * */
/*!
 注释三:重要注释。在各种压缩模式下,都会被编译到css文件中                                                    
 * */

1.2混合宏、继承、占位符


  1、混合宏:使用@mixin声明混合宏,在其他选择器中使用@include调用混合宏。

混合宏有三种方式;
  第一种方式:无参数;
  @mixin hunhe{}    .class{@include hunhe;}
  

1 @mixin hunhe(){
2     color: $color;
3 }
4 .class1{
5     @include hunhe;
6     background-color: blue;
7 }

 

第二种方式:有参数无默认值;
  @mixin hunhe(@param){}    .class{@include hunhe(value);}
  

1 @mixin hunhe($color){
2     color: $color;
3 }
4 .class2{
5     @include hunhe(green);
6     background-color: yellow;
7 }
8 

 

第三种:有参数有默认值;
  @mixin hunhe(@param:value){}    .class{@include hunhe();}
 

1 @mixin hunhe($color:red){
2     color: $color;
3 }
4 
5 .class3{
6     @include hunhe;
7     background-color: blue;
8 }

 

优缺点:
优点:①可以传参  ②不会产生同名的class
缺点:调用时,会把混合宏中所有的代码copy到选择器中,产生大量重复代码
2、继承:声明一个普通class,在其他选择器中使用@extend继承这个class;
  .class{ }               .class{ @extend.class1;}

1 //继承
2 .class1{
3     color: red;
4 }
5 .class{
6     @extend.class1;
7     background-color: yellow;
8 }

 

优缺点:
优点:将相同代码,提取并集选择器,减少冗余代码;
缺点:①不能传参;②会产生出一个多余的class;
 3、占位符:使用%声明占位符,在其他选择器中使用@extend 继承占位符;
   %class1{}             .class1{@extend %class1;}

 1 //占位符
 2 %class1{
 3     color: red;
 4 }
 5 .class4{
 6     @extend %class1;
 7     background-color: yellow;
 8 }
 9 .class5{
10     @extend %class1;
11     background-color: blue;
12 }

 

优缺点:
优点:①将相同代码,提取到并集选择器,减少冗余代码;②不会生出一个多余的代码
缺点:不能传参
  
  

1.3条件语句、循环、函数

scss作为css的辅助工具,赋予了css类似于js的一些功能,例如循环、if条件语句、函数等;其中,一定要记得@符号的使用!!!

1、if条件结构:
      条件结构需要卸载选择器里面,条件结构的大括号直接包裹样式属性。
       @if 条件{}
       @else{}
  

 1 //scss中的条件语句
 2 
 3 .class6{
 4     width: 100px;
 5     height: 100px;
 6     @if 1>2{
 7         background-color: yellow;
 8     }@else{
 9         background-color: green;
10     }
11 }

 


2、for循环:有着两种方式,类似于开区间和闭区间;
       @for $i from 1 to 10{}  //不包含10
       @for $i from 1 through 10{}  //包含10
   

1 //for循环
2 @for $i from 1 through 10{
3     .border-#{$i}{
4         border:#{$i}px solid yellow;
5     }
6 }

 


3、while循环;
      先使用$符定义一个变量,然后进行条件判断,在{}中进行循环;
  

1 //while循环
2 $i:0;
3 @while $i<10{
4     .while-#{$i}{
5         border:#{$i}px solid red;
6     }
7     $i:$i+1;
8 }

 


4、each 循环遍历
      @each $item in a,b,c,d{
       //$item  表示a,b,c,d的每一项
   }

 

1 //each循环遍历
2 $i:0;
3 @each $item in c1,c2,c3,c4{
4     $i:$i+1;
5     .#{$item}{
6         border:#{$i}px solid red;
7     }
8 }

5、函数

scss也可以想js一样进行函数的调用;

1 @function func($num){
2     @return $num * 2;
3 }
4 
5 .funcTest{
6     width: func(10px);
7 }

 

二、LESS

less作为和scss同等地位的css辅助工具,在一些方面有着相同点,另一方面也有这他的优点;

2.1less基本语法

1、声明变量:@变量名:变量值
     使用变量:@变量名
 相对于scss,less变量的声明使用@符号;并且,变量一般使用在多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量
  
  >>>less中的变量类型
  在css中出现的属性值,在less中都可以用作变量名
  ①数值类: 不带单位的 123    带单位的  1px
  ②字符串:带引号的 "hahahaah"    不带引号的  red   #ff0000
  ③颜色类:  red  #ff0000  RGB(255,255,0)
  ④值列表类型: 多个值用逗号或空格分隔  10px solid  red
  

1 @color :#ff0000;
2 @length:100px;
3 #div{
4     width: @length;
5     height:@length*2;
6     background-color: @color;
7 }

 


  2、混合(Mixins),我们也亲切的叫做“米心”;相当scss的混合宏,同样有着三种方式:
  ①无参数混合;实际上就是一个普通的class选择器,会被编译到css文件中;
       声明: .class{}
       调用:在选择器中,使用.class;直接调用
  

1 //无参数混合
2 .borderRadius{
3     border-radius: 10px;
4     -webkit-border-radius: 10px;
5     -moz-border-radius: 10px;
6 }

 


 ②有参无默认值混合:
       声明:.class(@param){}
       调用:.class(paramValue);
  

 1 //有参无默认值混合
 2 .borderRadius1(@radius){
 3     border-radius: @radius;
 4     -webkit-border-radius: @radius;
 5     -moz-border-radius: @radius;
 6 }
 7 .class{
 8     width: 10px;
 9     height: 10px;
10     .borderRadius1(10px);
11 }

 


  ③有参有默认值混合:
       声明:.class(@param:10px){}
       调用:.class(paramValue); 或 .class();
 

 1 //有参有默认值混合
 2 
 3 .borderRadius2(@radius:10px){
 4     border-radius: @radius;
 5     -webkit-border-radius: @radius;
 6     -moz-border-radius: @radius;
 7 }
 8 
 9 .class{
10     width: 10px;
11     height: 10px;
12     .borderRadius2();
13 }

 


  >>>如果声明时没有给参数赋默认值,则调用时必须赋值,否则报错;
     有参混合,在编译时,不会出现在css文件中;

 

2.2匹配、@argument、嵌套

 1、LeSS的匹配默认
       ①声明,类似于switch语句;
       @pipei(条件一,参数){}    @pipei(条件二,参数){}   @pipei(@_,参数){}
       ②调用:
       @pipei(条件的值,参数的值){}
       ③匹配规则:
       根据调用时输入的条件值,去寻找与之匹配的混合执行;
  

 1 /*匹配模式*/
 2 .pipei(lefts,@width:10px){
 3     margin-left: @width;
 4 }
 5 .pipei(rights,@width:10px){
 6     margin-right: @width;
 7 }
 8 .pipei(tops,@width:10px){
 9     margin-top: @width;
10 }
11 .pipei(bottoms,@width:10px){
12     margin-bottom: @width;
13 }
14 .pipei(@_,@width:10px){
15    padding:10px;
16 }
17 @position:leftssssss;
18 //当上述条件都不符合时执行,相当于default;
19 .class1{
20     .pipei(@position,20px);
21 }

 


 2、@arguments  特殊变量:
       在混合中,@arguments表示混合传入的所有参数。@arguments中的多个参数,用空格分隔。
      

1 /*@arguments*/
2 .argu(@width,@style,@color){
3     //border:@width @style @color;
4     border:@arguments;
5 }
6 .class2{
7     .argu(10px,solid,red);
8 }

 

        
               
 
4、Less嵌套
        less中允许css选择器按照html的结构进行嵌套。  相当于scss的选择器嵌套与伪类嵌套的组合;
       

 1 /*less嵌套*/
 2 
 3 section{
 4     width: 800px;
 5     height: 200px;
 6     background-color: #cccbbb;
 7     >p{
 8         color: blueviolet;
 9         font-size: 20px;
10         font-weight: bold;
11     }
12     
13     ul{
14         padding: 0px;
15         list-style: none;
16         li{
17             display: block;
18             float: left;
19             width: 200px;
20             height: 50px;
21             background-color: yellow;
22             text-align: center;
23             &:hover{
24                 background-color: cornflowerblue;
25             }
26         }
27     }
28 }

 

有两点值得注意;
        ①less的嵌套,默认是后代选择器。如果需要自带选择器,需要在前面加>;
        ②&符号,表示这个&所在的上一层表达器;比如上述嵌套:&:hover相当于section ul:hover

 

三、less&scss的使用

作为css的辅助工具,需要其操作环境最终还要转为css才能实现网页的布局;使用less直接创建Less文件就可以了吗?不,我们通常使用Koala进行less或scss到css的转换;

将less或scss的文件夹拖进koala的主页中,就可以随心所欲的编译了!!

技术分享

 

编者按

对于一些简单的 项目,使用不使用scss和less并无区别,可在一些难度较大、比较复杂的项目上,less或scss就很有必要了。既节省我们的时间,有提高效率,一举多得!!!





























































































以上是关于最好用的css辅助工具——SASS&LESS的主要内容,如果未能解决你的问题,请参考以下文章

Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

sass & compass 实战录

Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

Laravel 5 & Webpack SASS - 如何添加另一个 CSS 文件

Java的SASS实现? [关闭]

我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗?