当前位置：首页 > news >正文

Sass 快速入门教程

news 来源：原创 2024/4/28 9:04:19

@import

若不想将scss编译成css文件，在scss文件名前面加上下划线_。

使用CSS @import指令
默认情况下@import在当前目录下需找scss文件加载，若想使用原生css的import指令可以使用下面四个规则：

当@import后面跟上的文件名是以.css结尾的时候；
当@import后面跟的是http://开头的字符串的时候；
当@import后面跟的是一个url()函数的时候；
当@import后面带有media queries的时候。

使用@import导入文件
使用@import导入下划线开头文件不需要添加下划线，compass会自动为文件名添加下划线导入。

父类选择器

a {
    &:hover {
        color: blue;
    }
}

其中&符号表示连接父类，最终生成代码：

a:hover {
    color: blue;
}

属性嵌套

.main-sec {
    font-family: $main-sec-ff;
    
    .headline {
        font: {
            family: $main-sec-ff;
            size: 16px;
        }
    }
}

变量

定义

$color-withe: #FFFFFF;

以$符号开头后面跟上字符串作为变量名，后跟上冒号:和变量值，冒号是分分隔符，分割变量名和变量值。
使用

.main {
    background: $color-withe;
}

直接使用变量名引用即使用变量值。

函数

内置函数

称为functions

可重用代码块

minxin

使用时以复制拷贝存在，通过@include方式调用；

定义

@mixin col-6 {
    width: 50%;
    float: left;
}

// 使用
.webdemo-sec {
    @include col-6;
    
    &:hover {
        background: $color-FFF;
    }
}

生成的代码：

.webdemo-sec {
    width: 50%;
    float: left;
}
.webdemo-sec:hover {
    background: $color-FFF;
}

带参数函数

@mixin col ($width) {
    width: $width;
    float: left;
}
// 使用
.webdemo-sec {
    @include col(30%);
}

带默认参数

@mixin col ($width: 50%) {
    width: $width;
    float: left;
}
// 使用
.webdemo-sec {
    @include col();
}

使用时以组合声明方式存在，通过@extend方式调用。将继承者选择器插入到被继承者选择器出现的地方：

.error {
    color: #F00;
}
.serious-error {
    @extend: .error;
    border: 1px #F00 solid;
}

注：extend不可以继承选择器序列。

使用%构建仅用来继承选择器：

%error {
    color: #F00;
}
.serious-error {
    @extend: %error;
    border: 1px #F00 solid;
}

at-root

被嵌套内容输出到样式表顶层

.main-sec {
    font-family: $main-sec-ff;
    
    @at-root {
        .main-sec-headline {
            font: {
                famili: $main-sec-ff;
                size: 16px;
            }
        }
        .main-sec-detail {
            font-size: 12px;
        }
    }
}
// 生成的代码
.main-sec {
    font-family: $main-sec-ff;
}
.main-sec-headline {
    font-family: sans;
    font-size: 16px;
}
.main-sec-detail {
    font-size: 12px;
}