less框架和sass框架

Posted 2020-12-28 zms-cyh

 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;
        }