css预编译sass,less

分手后的思念是犯贱 2022-05-28 01:49 456阅读 0赞

# sass,less是什么？ #

> css的预编译。把css当成函数编写，可以定义变量,嵌套，混合器

# 安装sass使用的步骤/如何配置sass? #

### 一、安装对应依赖node模块： ###

`npm install node-sass --save-dev`

`npm install sass-loader --save-dev`

### 二、配置webpack.base.config.js ###

在loaders里面加上

rules: [
        {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: vueLoaderConfig
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            query: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
        },
        {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        },
        {
            est: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            query: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
    }]

### 三、在用scss的地方声明 ###

`<style lang="scss" scoped type="text/css"></style>`

♥ scoped 表示样式只在当前组件有效

# 有哪几大特性？ #

### 1、可以用变量 ###

如果你的网站中有几处样式相同的话,比如一些颜色和字体,那么可以使用变量来处理这个问题

例如（$变量名称=值）；

### 2、可以用混合器@mixin ###

当你的样式越来越多,需要复用大段的样式,独立变量就显得有点吃力了,这时候你可以通过sass中的混合器来进行复用(当然也可以用占位符或者继承).

*  2.1 多值参数:

调用时可不传参数,则使用默认值,也可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin cont($color:red,$fontSize:14px){
        color: $color;
        font-size: $fontSize;
    }
    body{
        @include cont();
    }
    
    /* 生成代码: */
    /* line 8, ../sass/mixin.scss */
    body {
    color: red;
    font-size: 14px;
    }

*  2.2 多组参数:

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

/* scss: */
    @mixin box-shadow($shadow...) {
        -webkit-box-shadow:$shadow;
        box-shadow:$shadow;
    }
    .box{
    border:1px solid #ccc;
        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
    }
    
    /* css: */
    .box {
        border: 1px solid #ccc;
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
    }

**注意：如果不写这三个点，会报错：混合器只带一个参数，却传入了3个参数**

以上小结:当大量复用样式中需要使用到变量的时候可以使用混合器@mixin进行重写,例如圆角的兼容性,处理浏览器前缀等问题,否则使用继承@extend进行重写

*  2.3 混合器、占位符之间的区别

> 区别：
> 
> 当在一个页面中多次调用的话,@mixin不会将样式相同的代码进行合并,而使用占位符多次调用的话则会将样式相同的代码进行合并.

**混合器@mixin**

优点:可传参

缺点:如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余.

/* scss: */
    @mixin my-color{
        color: red;
    }
    .div1{
        @include my-color;
    }
    .div2{
        @include my-color;
    }
    
    /* 生成之后的css:*/
    /* line 5, ../sass/mixin2.scss */
    .div1 {
        color: red;
    }
    /* line 9, ../sass/mixin2.scss */
    .div2 {
        color: red;
    }

**占位符 %**

优点:当在一个页面中多次调用的话,会将样式相同的代码进行合并

缺点:不能传参

%my-color{
        color: green;
    }
    .div3{
        @extend %my-color;
    }
    .div4{
        @extend %my-color;
    }
    生成代码:
    /* line 13, ../sass/mixin2.scss */
    .div3, .div4 {
        color: green;
    }

### 3、可以嵌套 ###

父子关系一目了然

.div1
         background-color:red;
        .div1-1
               background-color:yellow;
        .div1-2
               background-color:blue;

#  **saas和less不同于普通css的地方** #

>  *  定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
>  *  嵌套写法，父子关系一目了然；
>  *  使用运算符，可以进行样式的计算；
>  *  内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
>  *  继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
>  *  Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[20190510130531760.jpg]: /images/20220528/5e5af6fbd42a4175a76211b0517c0824.png