less框架和sass框架

 less框架

@width: 200px;

        // 带参数的混入，括号中是参数，值可变

        .margin(@value){
                        margin-bottom: @value;
        }

.box1{
                width: @width;
                height: @width;
                background-color: red;
                // 引用带参数的混入，将变量直接赋值
                .margin(10px);
        }

.box2{
                // 将一个已声明好的类（.box1）作为声明给另一个元素(.box2)
                .box1;
                .margin(30px);
        }

        // less 选择器支持嵌套，嵌套规则与 HTML 文档节点相同
        #home{
                color : blue;
                width : 600px;
                height : 500px;
                border:outset;
                #top{
                    border:outset;
                    width : 90%;
                }
                #center{
                        border:outset;
                        height : 300px;
                        width : 90%;
                        #left{
                                border:outset;
                                float : left;
                                width : 40%;
                        }
                        #right{
                                border:outset;
                                float : left;
                                width : 40%;
                        }
                }
        }

        li{
            background-color: red;
            &:hover{
                    background-color: yellow;　　　　　　　}
        }

sass框架

<!-- sass 和 scss 都是 sass ，

只是 sass 是老版本的语法，缩进要求严格，没有{}和；，后缀以 .sass ;

scss 是 sass 的新语法，后缀以 .scss 结尾 -->

        @charset "utf-8";
        $width: 250px;

        // 声明混合宏 @mixin 关键字声明
        @mixin margin{
                            margin-bottom: 10px;
                        background-color: red;
        }

         // 带参数的混合宏
        @mixin padding($value){
                                padding: $value;
        }

        // 继承，先声明一个基础（公用）样式块
        .globalStyle{
                    width: 200px;
                    height: 50px;
                    outline: none;
        }

         // 占位符 如果没有元素调用 % 的样式，css 文件中不会有 % 的代码块
        %beitai{
                width: 200px;
                height: 50px;
                outline: none;
        }

     .box1{
                width: $width;
                height: $width;
                // 注意冒号后面的空格
                // 所有简写属性都可以这样书写 内外边距、backgroud、font 等
                border: {
                        top: 1px solid red;
                        right: 2px dashed yellow;
                }

                // 调用混合宏 关键字 @include + 类名
                @include margin;
                @include padding(10px);
        }
        .box2{
                width: $HHWidth - 150px;
                @include padding(20px);
        }
        input[type="text"]{
                            border: 1px solid red;
                            // 调用继承：关键字 @extend + 类名 ，
                                继承的样式会以并集选择器的形式存在在 CSS 文件中
                            // @extend .globalStyle;
                            @extend %beitai;
        }
        input[type="password"]{
                            border: 1px solid green;
                            // @extend .globalStyle;
                            @extend %beitai;
        }

原文地址：https://www.cnblogs.com/zms-cyh/p/9426008.html