scss/less语法以及在vue项目中的使用(转载)

1.scss与less都是css的预处理器，首先我们的明白为什么要用scss与less，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写复杂的样式时必然存在局限性，不灵活，而scss与less正好为css提供这些，让css可以像编程一样灵活书写样式，而且scss与还提供了一些css兼容性的处理，所以运用scss就不需要像写css时队友的语法需要做hack处理。SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。

2.本文我们只对scss介绍，其实less都差不多，当你使用scss语法是要用.scss后缀，使用sass语法时用.sass后缀。
3.在vue项目中的使用：

安装：在命令行中输入：npm install node-sass sass-loader --save-dev
在样式中声明使用scss:<style lang=scss scoped><style>（到这里就可以愉快的使用scss语法了）
注：在webpack.config.js中不需要配置使用sass-loader，因为vue-loader会自动解析

4. scss常用语法简介：

1.自定义变量以及子元素书写：

<style lang=scss scoped>
/*scss的使用:*/
/*1.自定义变量*/
$color:pink; 
$width:200px;
$height:200px;
$right:right;
$num:2;
.test{
    background:$color;
    width:$width;
    height:$height;
    margin:30px auto;
    /*插入变量*/
    border-#{$right}:2px solid blue;
    /*子元素的书写 选择器嵌套*/
    p{
        color:orange;
        font-size: 30px;
    }
}

2.样式的加减乘除以及继承样式：

.p{
    background:yellowgreen;
}
.test2{
    /*样式的加减乘除，自定义变量再使用*/
    width:$num*100px;
    height:$num*50px;
    border:(1px+1px) solid orange;
    /*样式的继承*/
    @extend .p;
}

3.样式的复用：

/*代码的复用,相当于自定义一个函数，并且可以 传参*/
@mixin box($height){
    height:$height;
    width:200px;
    border:1px solid deeppink;
}
.test3{
    /*调用*/
    @include box(200px);
}

4.使用if语句：

/*使用if语句判断使用哪套样式，lightness是scss中的一个函数，用来判断色彩度，$color为传入的自定义参数*/
.test4{
    @if lightness($color)<30%{
        width:50px;
        height:50px;
        background:cyan;
    }@else{
        width:50px;
        height:50px;
        background:yellow;
    }
}

5.scss的三种循环：for while each：

/*循环语法，包括最常见的三种循环方法，for,while,each,*/
/*其中循环包含开始不包含结束量,如下不包含5*/
@for $i from 1 to 5{
    .R#{$i}{
        width:$i*20px;
        height:$i*20px;
        /*注意:变量带单位时不能写成($i)px;应该写:#{$i}px*/
        border:#{$i}px solid olive;
    }
}

6.scss中的函数：

/*函数使用*/
@function double ($num){
    @return $num*2
}
.test5{
    font-size: double(20px);
    color:gold;
}

秒客网

scss/less语法以及在vue项目中的使用(转载)

相关文章