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 結尾 -->

        $HHWidth: 250px;
        .box1{
                //注意冒號後面的空格
                width: $HHwidth;
                //全部的簡寫屬性均可以這樣書寫，內邊距、外邊距、background、font等
                border:{
                        top:1px solid red;
                        right:2px dashed yellow;
                }
        }
        .box1{
                width:$HHwidth;
        }

 

混合宏

// 聲明混合宏 @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;
        }