Sass 快速入门教程
@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;
}
推荐阅读:
巧用SASS之如何遍历n个子元素并为其设置属性
关键字:sass, width, 变量, import
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!