less框架和sass框架

Posted zms-cyh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
        }









以上是关于less框架和sass框架的主要内容,如果未能解决你的问题,请参考以下文章

flexible.js框架改写

Sass 的使用

Vue项目代码规范

前端框架怎么用??用的好处是什么?

web

现在有哪些主流CSS框架