为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 SCSS&SASS相关基础内容

SCSS&SASS相关基础内容

标签：
Html/CSS

以下内容代码部分源于官方网页
导入
通过@import导入其它scss／sass文件，会自动合并多个文件的代码，导入可以省略后缀
@import"sidebar"和@import "sidebar" 是同样的效果

通常我们将项目根据功能性分拆成不同的sass文件，按需导入对应的文件

嵌套规则

只需要通过花括号的嵌套就可以实现CSS继承的特性

main p{ 
color:#00ff00;
width:97%；
.redbox{
    background-color:#ff0000;
    color:#000000;
}

}
从红色部分可以看到与正常的css不同的部分，内部嵌套了一个样式，它会被编译为：

main p{ 
color:#00ff00;
width:97%;

}

main p .redbox{ 
background-color:#ff0000;
color:#000000;

}

还有更多简便的写法，实现多个样式同时继承

main {

width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}

其中包含了三层嵌套，这样的结构将被编译为

main {

width: 97%;
}

main p, #main div {

font-size: 2em;
}

main p a, #main div a {

font-weight: bold;
}

main pre {

font-size: 3em;
}

引用父级选择符 &
在嵌套时，它会特别好用，编译时会直接被替换为父选择符，输出到CSS中

main {

color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}

编译后&被替换为父级的a，被编译为，

main {

color: black;
}

main a {

font-weight: bold;
}

main a:hover {

color: red;
}

属性嵌套

CSS中有很多属性是带有前缀，也可以称之为命名空间，如font-family，font-size等都携带了font，如果你想对相同命名空间的进行统一定义，sass为您提供了便捷的方式
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

font被自动填充到对应的属性中

.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}

我们也可以把font利用起来

.funky {
font: 12px {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译后：
.funky {
font:12px;
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}

注释
Sass是支持多行和单行注释的，如
/ /
//
/

*
**/

当注释的第一个文本是!时，该注释在编译后，甚至压缩后都会被保留在文件中，这对版权信息的插入时很有用的。

Sass Script
除了属性，Sass还可以使用变量算法，让自己更具扩展性，功能更强大

变量（variables）：$
通过$声明变量，可在其它位置引用，这样的操作和Android的value.xml像极了，很多长度，字号，颜色都可以通过变量来控制，调整时变得极为方便。注意：变量是可以覆盖的

$width: 5em;

main {

width: $width;
}

编译后

main {

width: 5em;
}

混合（Mixins）
Mixins是Sass强大的表现，可以通过传值和嵌套来实现生成对应的样式块，并抽象复用，mixin是通过@include来调用实现的

@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}

那如何使用这个mixin呢，sass提供了
@include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
编译为

.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}

很强大有没有，当然也可以单独@include

@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;

编译后

a {
color: blue;
background-color: red;
}

也可以@include多个mixin

@mixin compound {
div{
@include highlighted-background;
@include header-text;
}
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

@include compound;
编译后

div{
background-color: #fc0;
font-size: 20px;
}

Arguments
支持参数来编译样式

@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
编译后
p {
border-color: blue;
border-width: 1in;
border-style: dashed;
}

更强大的是这个入参是可以定义默认值的，我们设置$width为1in
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
编译后
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }

多参数支持，很多样式属性值由多个字段组成，如font、box-shadow，mixin也提供了对应的解决方法，在参数后追加...，就可以支持这样的入参
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译后
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

除了这样，还可以将多个变量按这样的方式传入
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
可以看到声明变量集合，同时传给了mixin colors

编译后

.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}

也可以将对应的入参，透传给其它mixin

@mixin wrapped-stylish-mixin($args...) {
font-weight: bold;
@include stylish-mixin($args...);
}

mixin还可以在css结构上大做文章，通过@content可以抽象更多的代码
如下边的代码展示了
@mixin apply-to-ie6-only {

  • html {
    @content;
    }
    }
    @include apply-to-ie6-only {
    logo {

    background-image: url(/logo.gif);
    }
    }

编译后，可以发现#logo已经为替换了@content

  • html #logo {
    background-image: url(/logo.gif);
    }

@content和传参是可以同时进行的，注意：变量只会作用于入参，不会作用到mixin的形参。变量只作用于

$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}

.colors {
background-color: blue;
color: white;
border-color: blue;
}

mixin指令
指令和表达式是mixin的高级应用，通过灵活的使用，可以得到意想不到的效果
if()
if()是Sass的一个内建函数，与之相似的@if则是一个内建指令。if()用来做条件判断并返回特定值，写法为三个参数，条件，真返回，假返回。示例如下：
@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}
.firstClass {
@include test(true);
}
.secondClass {
@include test(false);
}
编译后
.firstClass {
color: blue;
}
.secondClass {
color: red;
}
看效果有些像 a?b:c
@if后边跟的是一个表达式，如果表达式的结果为true，则返回特定的样式，示例如下：
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
}
.txt1 {
@include txt(none);
}
.txt2 {
@include txt(bold);
}
编译后
.txt1 {
color: white;
}
.txt2 {
color: white;
font-weight: bold;
}
还可以跟@else @else if，来处理多个条件的判断
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
@else if $weight == light { font-weight: 100;}
@else if $weight == heavy { font-weight: 900;}
@else { font-weight: normal;}
}
.txt1 {
@include txt(bold);
}
.txt2 {
@include txt(light);
}
.txt3 {
@include txt(heavy);
}
.txt4 {
@include txt(none);
}
.txt5 {
@include txt(normal)
}
编译后：
.txt1 {
color: white;
font-weight: bold;
}
.txt2 {
color: white;
font-weight: 100;
}
.txt3 {
color: white;
font-weight: 900;
}
.txt4 {
color: white;
font-weight: normal;
}
.txt5 {
color: white;
font-weight: normal;
}

@for则用于循环输出，它由两种方式，from start through end和from start to end，区别于不同的遍历范围，对应start至end和start至end-1 。还有一个特性就是，当start大于end时，是由大到小的遍历，反之由小变大。
@for $i from 1 through 4 {
.col-#{$i} { width: 100/4 * $i + %;}
}
编译后：
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}

@each
同样是用于循环输出，@each用于遍历list或map来实现循环输出
@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
@each 后面的 $usr 变量用于保存每次遍历到的元素，然后使用差值语法（#{var}）来拼接正确的图片路径

编译后：

.bob-avatar {
background-image: url("/img/bob.png");
}
.john-avatar {
background-image: url("/img/john.png");
}
.bill-avatar {
background-image: url("/img/bill.png");
}
.mike-avatar {
background-image: url("/img/mike.png");
}

遍历一个map，该处$key取到的user1……

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
还可以对多个列表进行遍历
$alt: alert, yellow, red;

$sub: submit, white, green;
$bck: back, blue, transparent;
@each $type, $txt, $back in $alt,$sub,$bck {
.#{$type}-button {
color: $txt;
background-color: $back;
}
}
编译后：
.alert-button {
color: yellow;
background-color: red;
}
.submit-button {
color: white;
background-color: green;
}
.back-button {
color: blue;
background-color: transparent;
}
@while
也是循环输出，后面跟一个表达式，表达式结果为false，则停止循环，可在对应需求的场景使用
$x:1;
@while $x < 4 {
.col-#{$x} { width: 100/4 * $x;}
$x: $x + 1;
};
当$x<4的结果为false时，程序就会退出循环。

当我们觉得mixin已经很强大的时候，认识function就直接跪了，还能好好的玩耍css了吗，让我们了解一下强大的function，基本上符合javascript的语法，前端开发工程师非常容易上手。

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n $grid-width + ($n - 1) $gutter-width;
}

sidebar { width: grid-width(5); }

@function 声明，@return 返回值，入参也可以这样写

sidebar { width: grid-width($n: 5); }

编译后

sidebar {

width: 240px;
}
别看写了那么多，只生成了这些点的字符，但这也是划时代的进步

点击查看更多内容
发表于 2017.10.28 22:10， 共 2105 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

wenso

产品经理
手记
篇
粉丝
1
获赞与收藏
9

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消