Sass基本指令

图片 1每一日美图

@import

指令大家在Sass函数的牵线中有涉及过,并且在那一章提前攻读了@function指令。后天我们就来看一下Sass中常用的片段指令,在念书指令这一局地我会分为两篇学习,只要因为指令富含了依照css指令扩大的通令与sass原生指令。本篇会解说基于css指令扩张的授命。

Sass 辅助全数 CSS3 的 @ 法则, 以及部分 Sass 专门项目标平整,也被誉为“指令(directives)”。 这么些法则在 Sass 中享有分化的功力,详细解释如下。

@指令标志符 指令内容;

@import

不通晓诸位读者有没有察觉大家前面的源码中在文书伊始处会有@charset,那其实是叁个CSS3指令,用于安装编写翻译器解析文本所使用的编码,假设在源码中留存中文则供给不然编写翻译出来的是乱码,如下

Sass 扩大了 CSS 的 @import 准则,让它能够引进 SCSS 和 Sass 文件。 全部引进的 SCSS 和 Sass 文件都会被合并并出口贰个纯粹的 CSS 文件。 别的,被导入的文本中所定义的变量或 mixins 都足以在主文件中选用。

.mian{ font-family:"宋体";}

Sass 会在当前目录下搜寻别的 Sass 文件, 如果是 Rack、Rails 或 Merb 情形中则是 Sass 文件目录。 也足以经过 :load_paths 选项大概在命令行中使用 --load-path 选项来钦点额外的搜寻目录。

尚未设置编码编写翻译出的css

@import 依照文件名引进。 私下认可情况下,它会寻觅 Sass 文件并直接引进, 但是,在个别三种景况下,它会被编写翻译成 CSS 的 @import 法则:

.mian { font-family: "瀹嬩綋";}
  • 固然文件的扩充名是 .css。
  • 万一文件名以 http:// 开头。
  • 一经文件名是 url()。
  • 假使 @import 包涵了别样媒体询问(media queries)。

安装了编码后编写翻译出来的

假定上述意况都尚未出现,何况增加名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就能被引进。 若无扩展名, Sass 将试着搜索具备 .scss 或 .sass 扩张名的同名文件并将其引进。

@charset "UTF-8";.mian { font-family: "宋体";}

例如:

css中import只可以导入css,在sass中此命令被拉长了,也得以导入sass文件。@import 搜索 Sass 文件并将其导入,但在以下情状下,@import 仅看成普通的 CSS 语句,不会导入任何 Sass 文件。

@import "foo.scss";
  • 文本实行名是 .css;

  • 文本名以 http:// 开头;

  • 文件名是 url();

  • @import 包含 media queries;

  • 比方只愿意导入别的的sass文件然而不希望被编写翻译成css,此文件能够在命名时以下划线_开头;

    图片 2截图

    咱俩得以看到_Compenet.sass并不曾编译为css文件

  • import指令只可以够用在文书最外层,简单来讲就是和@charset同样,不可能用在嵌套的内外文内如;

@import "foo";
//import错误用法.mian{ font-family:"宋体"; @import "Compenet";}

双方都将引进 foo.scss 文件, 而

这里import在mian中采取,并不是最外层,会报如下错误消息:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
//error _Compenet.scss (Line 1: @charset may only be used at the root of a document.)

将被编写翻译为:

  • 其在 CSS 准绳中嵌套。要是 @media 嵌套在 CSS 准则内,编写翻译时,@media 将被编写翻译到文件的最外层,而media则带有嵌套的父采用器。
  • media 的 queries 允许相互嵌套使用,编写翻译时,Sass 自动加多 and
  • media 能够利用 SassScript(比如变量,函数,以及运算符)取代条件的称号可能值
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

在最后,笔者依然将本文的最重要内容整理为考虑导图供读者异常快精通

也得以透过一个 @import 引入两个公文。例如:

图片 3Sass指令1.png

@import "rounded-corners", "text-shadow";

将引进 rounded-corners 和 text-shadow 八个文本。

假定您有二个 SCSS 或 Sass 文件供给引进, 可是你又不期望它被编写翻译为一个CSS 文件, 那时,你就足以在文书名前边加三个下划线,就能够幸免被编写翻译。 这将报告 Sass 不要把它编写翻译成 CSS 文件。 然后,你就能够像过去一样引进这些文件了,而且还足以省略掉文件名前面包车型地铁下划线。

比方说,你有贰个文本叫做 _colors.scss。 那样就不会生成 _colors.css 文件了, 况兼你还可以这么做:

@import "colors";//不用加下划线

来引入 _colors.scss 文件。

注意,在同一个索引无法同期设有游痛症划线和不血崩划线的同名文件。 举例, _colors.scss 不能与 colors.scss 并存。

嵌套 @import

虽说大多数时日只需在顶层文件使用 @import 就行了, 可是,你还足以把她们带有在 CSS 法规 和 @media 准则中。

来看官方网址提供的八个简便示例:

设若要引进的样式文件`example.scss`文件中蕴藏那样的代码:

.example {
  color: red;
}

然后那样援用:

#main {
  @import "example";
}

编写翻译出来的 CSS:

#main .example {
  color: red;
}

@media

Sass 中的 @media 指令和 CSS 的采纳法则平等的回顾,但它有别的叁个功能,能够嵌套在 CSS 准绳中。有一点类似 JS 的冒泡作用雷同,假使在样式中动用 @media 指令,它将冒泡到外面。来看一个简约示例:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译出来:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 也足以嵌套 @media:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

这儿编写翻译出来:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

在使用 @media 时,还是可以够应用插件#{}:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编写翻译出来的 CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

Sass 中的 @extend 是用来扩大选用器或占位符。比方:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

被编写翻译为:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

详细的能够纪念前边介绍的接轨样式部分。

恢宏选取器:

@extend 不仅仅扩大类选用器,还足以扩大任何选用器,举个例子 .special.cool, a:hover, 或 a.user[href^=“

 

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编写翻译出来:

a:hover, .hoverlink {
  text-decoration: underline; }

再来看三个复杂点的:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编写翻译出来的CSS

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多少个扩展

所设某些样式要两次三番多少个地点的体制,那么可以接纳 @extend 来承继五个选拔器或占位符的体裁,如:

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

编写翻译出来的CSS

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

扩张单一选拔器

前段时间大家领略 %placeholder 不采用@extend展现调用是不会生成任何样式代码。那么在甄选器中使用占位符同样。举例上边的代码:

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

这段代码在不调用从前不发出任何代码,唯有能过@extend调用之后才转移代码:

.notice {
  @extend %extreme;
}

编写翻译出来的CSS

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

@at-root

@at-root 从字面上解释正是跳出根成分。当你采纳器嵌套多层之后,想让有些选用器跳出,此时就足以应用 @at-root。来看四个简单的身先士卒:

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}

编写翻译出来的CSS

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

@debug

@debug 在 Sass 中是用来调解的,当你的在 Sass 的源码中应用了 @debug 指令之后,Sass 代码在编写翻译出错开上下班时间,在命令终端会输出你设置的提拔 Bug:

@debug 10em + 12em;

会输出:

Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功用看似,用来赞助大家更加好的调护治疗 Sass。如:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

会输出:WARNING: Assuming 30 to be in pixels
         on line 7 of ./8805/C7Kr/index.scss, in `adjust-location'
         from line 16 of ./8805/C7Kr/index.scss

@error

@error 和 @warn、@debug 成效是如出一辙。

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}

.test {
  @include error(15);
}

编译的时候:

你需要将15值设置在10以内的数 on line 7 at column 5

本文由365bet体育在线官网发布于网络工程,转载请注明出处:Sass基本指令

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。