Sass 快速入门教程

@import

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

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

  1. 当@import后面跟上的文件名是以.css结尾的时候;

  2. 当@import后面跟的是http://开头的字符串的时候;

  3. 当@import后面跟的是一个url()函数的时候;

  4. 当@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;
}

推荐阅读:

巧用SASS之如何遍历n个子元素并为其设置属性

关键字:sass, width, 变量, import

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部