SCSS和LESS的使用

编程语言 2019-04-17 10:00:52 阅读次数: 0

一. Sass/Scss、Less是什么?

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

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

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

二. Sass/Scss与Less区别

1.编译环境不一样

Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。

复制代码

Less-作用域
@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss-作用域
$color: #00c; /* 蓝色 */

#header {

  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}

#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Sass-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

我们可以看出来，less和scss中的变量会随着作用域的变化而不一样。

复制代码

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为nested

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

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

复制代码

/* Sample Sass “if” statement */

@if lightness($color) > 30% {

} @else {

}

/* Sample Sass “for” loop */

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

复制代码

 5. 引用外部CSS文件

scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.

复制代码

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

// 编译后：
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}

复制代码

Less引用外部文件和css中的@import没什么差异。

6.Sass和Less的工具库不同

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

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

三. 总结

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。

一、less基础语法

1、声明变量：@变量名：变量值；
      使用变量：@变量名;

2、混合(Mixins)
1)无参混合
声明： .class{}
调用：在选择器中，使用.class;直接调用

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

>>>如果声明时，没有给参数赋默认值，则调用时，必须赋值，否则报错 
>>>无参混合，实际上就是一个普通的class选择器，会被编译到CSS文件中；
而有参混合，在编译时，不会出现在CSS文件中。

复制代码

@color:#ff0000;//声明变量
@length:100px;//声明变量
#div1{
    width: 100px;
    height:@length;//使用变量
    background-color: @color;
}
//无参混合
.borderRadius{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;    
}
//有参无默认值混合
.borderRadius1(@radius){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;    
}
//有参有默认值混合
.borderRadius2(@radius:10px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;    
}
.class(){
    width: 10px;
    height: 10px;
    .borderRadius2();
}

复制代码

【变量使用原则】：
多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值，推荐使用变量；
【less中的变量类型】
在CSS中出现的属性值，在less中都可以用作变量名
1)数值类：不带单位的 123 带单位的 1px
2)字符串：带引号的 "hahhaha" 不带引号的 red #fffff
3)颜色类：red #ff0000 RGB(255,0,0)
4)值列表类型：多个值用逗号或空格分隔 10px solid red

3、less中的匹配模式
1)声明：
@pipei(@条件1，参数){}

@pipei(@条件2，参数){}

@pipei(@_，参数){} 
2)调用：
@pipei(条件的值，参数的值){}
3)匹配规则
根据调用时输入的条件值，去寻找与之匹配的混合执行。
@_表示不管匹配成功与否，都会执行的选项

复制代码

/*匹配模式*/
.pipei(lefts,@width:10px){
    margin-left: @width;  
}
.pipei(rights,@width:10px){
    margin-right: @width;   
}
.pipei(tops,@width:10px){
    margin-top: @width;  
}
.pipei(bottoms,@width:10px){
    margin-bottom: @width;  
}
.pipei(@_,@width:10px){//@_表示不管匹配成功与否，都会执行的选项
    padding: 10px;
}

@postion:lefts;
.class1{
    .pipei(@postion,20px); //调用:@pipei(条件的值，参数的值){}
}

复制代码

4、@arguments 特殊变量：
在混合中，@arguments表示混合传入的所有参数。@arguments中的多个参数用空格分隔。
.border(@width,@style,@color){
border:@arguments;//-->border:@width @style @color;
}

复制代码

.argu(@width,@style,@color){
//  border:@width @style @color;
    border: @arguments;
}
.class2{
    .argu(10px,solid,red);  //调用：分别传入三个参数的值
}

复制代码

5、LESS中的加减乘除运算：
LESS中的所有变量和数值，可以进行+ - * /运算。
需要注意的是，当颜色值运算时，红绿蓝分三组运算。组内单独计算，组间互不干扰。
6、LESS中的嵌套
LESS中允许CSS选择器按照HTML代码的结构进行嵌套。
1)less中的嵌套默认是后代选择器，如果需要子代选择器，需要在前面加>
2)&符号，表示这个&所在的上一层选择器。比如上述&，表示 section ul:hover

复制代码

/*
 * less中的嵌套
 */
#section{
    width: 800px;
    height: 200px;
    background-color: #ccc;
    >p{//>表示子代选择器
        color: red;
        font-weight: bold;//加粗
    }
    ul{
        padding: 0;
        list-style: none;
        >li{
            float: left;
            width: 100px;
            height: 50px;
            background-color: yellow;
            text-align: center;
            &:hover{//&表示上一层选择器(#section ul li:hover)
                background-color: green;
            }
    }
    }
}

复制代码

二、sacc基础语法

1、scss中的变量
 1)声明变量：$变量名：变量值；
 SCSS中，允许将变量嵌套在字符串中，但是变量必须使用#{}包裹
 eg:border-#{$left}:10px solid red;

复制代码

$width:100px;//scss中的声明变量
$position:left;
#div1{
    width: $width;
    height: $width/10;
    background-color: red;
    border-#{$position}:10px solid yellow;
}

复制代码

2、SCSS中的运算，会将单位进行运算。使用时需注意最终的单位是否正确。
 eg:10px * 10px=100 px*px;
 3、SCSS中的嵌套：选择器嵌套、属性嵌套、伪类嵌套
1)选择器嵌套ul{ li{} }
 嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前面加>
可以在选择器的大括号中，使用&表示上一层的选择器。
 2)伪类嵌套: li{ $:hover}
在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类
3)属性嵌套：font:{size:18px} -->font-size:18px;
对于属性名有-分割为多段的属性，可以使用属性嵌套。属性名的前半部分必须紧跟:,才能
用{}包裹属性的后半部分。

复制代码

section{
    background-color: #CCCCCC;
    p{
        color: red;
    }
    ul{
        padding: 0;
        li{
            list-style: none;
            //$=="section ul li"
            font:{
                size: 16px;
                weight:bold;
                family:"微软雅黑";
                style:"italic"//字体为斜体
            }
        }
    }
}

复制代码

4、混合宏、继承、占位符
 1)混合宏：声明@mixin声明混合宏，在其他选择器中使用@include调用混合宏
 @minxin hunhe{} .class{@include hunhe}
 @minxin hunhe(@param){} .class{@include hunhe(value)}
 @minxin hunhe(@param:value){} .class{@include hunhe()}

复制代码

//继承
.class1{
    color:red;
    }
.class{
    @extend .class1;
    background-color: yellow;
}
//混合宏
@mixin hunhe($color:red){
    color: $color;
}
.class3{
    @include hunhe(green);
    background-color: yellow;
}
.class4{
    @include hunhe;
    background-color: blue;
}
//占位符
%class1{
    color: red;
}
.class4{
    @extend %class1;
    background-color: yellow;
}
.class5{
    @extend %class1;
    background-color: green;
}

复制代码

 1)混合宏：声明时，可以有参数，也可以没有参数。参数可以有默认值，也可以没有默认值。
 但是调用时，必须符合声明时的要求。与LESS中的混合相同。
 >>>优点：1)可以传参

                   2)不会产生同名class
 >>>缺点：调用时，会把混合宏中的所有代码copy到选择器中，产生大量重复代码

 2)继承：声明一个普通的class，在其他选择器中使用@extend 继承这个class
 .class1{} .class1{ @extend .class1;}
 >>>优点：将相同代码提取到并集选择其中，减少冗余代码；
 >>>缺点：1)不能传参

                   2)会生出一个多于的class
 3)占位符：使用%声明占位符，在其他选择器中使用@extend继承占位符；
 %class1{} .class2{@extend %class1;}
 >>>优点：1)将相同代码提取到并集选择其中，减少冗余代码；
                   2)不会生出一个多于的class。
 >>>缺点：不能传参

5、if条件结构
 条件结构需要写在选择器里面，条件结构的大括号直接包裹样式属性。
 @if 条件{}
 @else{}

复制代码

//scss中的条件语句
.class6{
  width: 100px;
  height: 100px;
  @if 1>2{
      background-color: yellow;//设置背景色
  }@else{
      background-color: green;
  }
}

复制代码

6、for循坏：
 @for $i from 1 to 10{} //不包含10
 @for $i from 1 through 10{} //包含10

//for循坏
@for $i 1 through 10{
    .border-#{$i}{
        border: #{$i}px solid red;//设置外边框
    }
}

7、while循坏:
 $i:@extend;
 @while $i<10{
 $i:$i+1;
 }

复制代码

//while循坏
$i:0;
@while $i<10{
    .while-#{$i}{
        border: #{$i}px solid red;
    }
    $i:$i+1;
}

复制代码

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

复制代码

//each 循坏遍历
$i:0;
@each $item in c1,c2,c3,c4{
    $i:$i+1;
    .#{$item}{
        border: #{$i}px solid red;
    }
}

复制代码

猜你喜欢

转载自blog.csdn.net/aerchi/article/details/89349831
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022