资讯专栏INFORMATION COLUMN

CSS外挂:Sass 之规则(Rules)和指令(Directives)

honhon / 2735人阅读

摘要:根据文件名引入。这和指令非常相似,只要后面的条件为就会执行。被编译为循环指令的形式,是个变量名,是一个表达式,他将返回一个列表值。被编译为学完了回过头来整理也真是麻烦,算是总结吧。

前戏:下面这些玩意还是比较实用的,好像是进阶Sass必备的,以后写起 CSS 要溜得飞起啊!

规则(Rules) 1. @import

Sass 扩展了 CSS@import 规则,让它能够引入 SCSSSass 文件。 所有引入的 SCSSSass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS@import 规则:

如果文件的扩展名是 .css

如果文件名以 http:// 开头。

如果文件名是 url()。

@import 包含了任何媒体查询(media queries)

1.1 @import 几种用法
@import "icon.scss"; //带.scss,.sass扩展名

@import "icon"; //不带扩展名,Sass会自动寻找带有 .scss或 .sass 扩展名的同名文件并将其引入。

如果你有个 scss 文件需要引入, 但你又不希望它被编译成 CSS 文件, 这时,你就可以在文件名前面加个_下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线进行引用。

@import "_icons", "mixin"; //引入多个文件;

要注意的一点: 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _icons.scss 不能与 icons.scss 并存。

2. @media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。

SCSS:

.box{
    font-size: 18px;
    @media screen and (max-width: 768px) and (min-width: 320px){
        width: 300px;
    }
    @media screen and (max-width:1024px) and (min-width: 768px){
        width: 600px;
    }
}

编译为:

.box {
  font-size: 18px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
  .box {
    width: 300px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .box {
    width: 600px;
  }
}
3. @extend

SCSS:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
4. @at-root

主要解决编译出来的 css 选择器嵌套过于严重问题;

SCSS:

.view{
    %public{ //使用了%placeholder,只有使用了@extend调用,才会生成代码;
        content: "";
        display: block;
    }
    background-color: #e0e0e0;
    .view-head{
        &:after{
            @extend %public;
            border-bottom: 1px solid #e0e0e0;
        }
        @at-root .view-head-before{ //.view-head-before会被多带带提到一行;
            float: left;
        }
        @at-root .view-head-after{ //.view-head-after会被多带带提到一行;
            float: right;
        }
    }
    .view-footer{
        &:before{
            @extend %public;
        }
        color: #f00;
    }
}

编译为:

.view { background-color: #e0e0e0; }
.view .view-head:after,
.view .view-footer:before { content: ""; display: block; }
.view .view-head:after { border-bottom: 1px solid #e0e0e0; }
.view-head-before { float: left; }
.view-head-after { float: right; }
.view .view-footer { color: #f00; }
5. @debug, @warn, @error

@debugSass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug

@warn and @debug功能类似,在这不举栗子了,浪费高度。

SCSS:

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block {
  @include blockOrHidden; //默认是true;
}
.hidden{
  @include blockOrHidden(false);
}

命令行输出:

3 DEBUG: $boolean is true.
7 DEBUG: $boolean is false.
指令(Directives) 1. @if @else

@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。下面直接看栗子:

1.1 控制伪元素的content值

SCSS:

@mixin elseif($selector, $value){
    #{$selector}{
        $text: $value;        
        @if $text == google {
            content: "#{$text}";
            @debug "$text is #{$text}"; //在命令行会显示:DEBUG: $text is google.
        }@else if $text == facebook{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }@else if $text == wechat{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }@else if $text == twitter{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }
    }
}
@include elseif("div:before","google");
//(别嫌SCSS写得这么多,而最后输出就一行代码)
// 在实际项目中玩起来是很愉快的!

编译输出:

.box:before { content: "google"; }
1.2 控制元素显示隐藏的栗子

SCSS:

@mixin showOrhide($Boolean: true){
    @if $Boolean{
        display: block;
    }@else{
        display: none;
    }
}
.db{ @include showOrhide(); } //默认true;
.dn{ @include showOrhide(false); }

编译输出:

.db { display: block; }
.dn { display: none; }
2. @for 两种用法

$i => 变量,s => 起始值,e => 结束值;

2.1 @for $i from [s] through [e]

SCSS:

@for $i from 1 through 2{ //through循环出来的值包括end值
    .box-#{$i}{
        width: 20px * $i;
    }
}

编译为:

.box-1 { width: 20px; }
.box-2 { width: 40px; }
2.2 @for $i from [s] to [e]

SCSS:

@for $i from 1 to 2{ //to循环出来的值不包括end值
    .icon-#{$i}{
        font-size: 16px * $i;
    }
}

编译为:

.icon-1 { font-size: 16px; }
2.3 和Interpolation#{}一起玩

SCSS:

$bgc: blue, green, red, yellow;
@for $i from 1 to length($bgc){
    .bgc-#{nth($bgc, $i)}{
        background-color: #{nth($bgc, $i)};
    }
}
//上面说过to循环不包括end值,所以编译后只有3个class;

编译为:

.bgc-blue {
  background-color: blue;
}
.bgc-green {
  background-color: green;
}
.bgc-red {
  background-color: red;
}
2.4 @for生成个网格

SCSS:

$elem: div;
$grid-width: 60px;
$grid-clear: 20px;
%grid{
    float: left;
    margin:0 $grid-clear/2 0 $grid-clear/2;
    //margin:0 ($grid-clear/2) 0 ($grid-clear/2); //觉得看得有点乱也可以加上括号;
}
@for $i from 1 through 6{ //through
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

to编译出来的也是一样的css,主要区别于[e]的取值不同;下面这段代码的[e]值是7,而to方式的结束值是不包括最后一位的,所以to方式生成出来的css也是一样。

@for $i from 1 to 7{ //to
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

编译为:

.div-1, .div-2, .div-3, .div-4, .div-5, .div-6 { float: left;  margin: 0 10px 0 10px; }
.div-1 { width: 60px; }
.div-2 { width: 140px; }
.div-3 { width: 220px; }
.div-4 { width: 300px; }
.div-5 { width: 380px; }
.div-6 { width: 460px; }
3. @while

@while 指令也需要 SassScript 表达式,并会生成不同的样式块,直到表达式值为 false 时停止循环。这和 @for 指令非常相似,只要 @while 后面的条件为 true 就会执行。

SCSS:

$s: 12;
@while $s > 0{
    .fs-#{$s + 12}{
        font-size: $s + 12px;
    }
    $s: $s - 2;
}

被编译为:

.fs-24 { font-size: 24px; }
.fs-22 { font-size: 22px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }
4. @each

@each 循环指令的形式 @each $var in $var 是个变量名, 是一个 SassScript 表达式,他将返回一个列表值。

SCSS:

$list: checked, user, login, note, down, more;
@mixin icon-list{
    @each $i in $list{
        .icon-#{$i}{
            background-image: url("../images/#{$i}.png");
        }
    }
}
.icon{
    background-repeat: no-repeat;
    @include icon-list;
}

被编译为:

.icon { background-repeat: no-repeat; }
.icon .icon-checked { background-image: url("../images/checked.png"); }
.icon .icon-user { background-image: url("../images/user.png"); }
.icon .icon-login { background-image: url("../images/login.png"); }
.icon .icon-note { background-image: url("../images/note.png"); }
.icon .icon-down { background-image: url("../images/down.png"); }
.icon .icon-more { background-image: url("../images/more.png"); }
Reference API

SASS_REFERENCE — Sass Documentation #Directives

学完了回过头来整理也真是麻烦,算是总结吧。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115169.html

相关文章

  • CSS外挂Sass 混合宏(@mixin)、继承(@extend)、占位符(%placehold

    摘要:普遍情况下这仨在实际项目中用得还是比较多的,玩起来吧混合宏如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。不足如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余。 学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的@-Rules也是重要的一部分。普遍情况下这仨在实际项目中用得还是比较多的,玩起来吧! 1. 混合宏@mixin 如果你的...

    or0fun 评论0 收藏0
  • sass的学习记录

    摘要:核心团队不懈努力,一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。 sass简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言! 兼容C...

    xuweijian 评论0 收藏0
  • vue开发看这篇文章就够了

    摘要:注意此处获取的数据是更新后的数据,但是获取页面中的元素是更新之前的钩子函数说明组件已经更新,所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别? Library 库,本质上是一...

    fsmStudy 评论0 收藏0
  • CSS外挂Sass 运算(加、减、乘、除)

    摘要:例如被编译为最后一个栗子字符运算运算符可以用来连接字符串被编译为注意,如果有引号的字符串被添加了一个没有引号的字符串也就是,带引号的字符串在符号左侧,结果会是一个有引号的字符串。 学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的Operations也是重要的一部分。现在的前端各种工程化、模块化、面向工资编程,哦...不对,是面向对象编程。玩起来吧! 1. 加减法 加减法...

    khs1994 评论0 收藏0
  • Webpack入门——使用Webpack打包Angular项目的一个例子

    摘要:一什么是是一个前端的模块管理工具,以下是的官网,一进入官网可以看到下面这张大图这张图基本上解释了是用来干嘛的,将一些相互依赖的模块文件,打包成一个或多个文件,减少请求次数,提升性能。希望这篇文章可以帮助大家入门。 (一)什么是Webpack   Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github...

    pakolagij 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<