sass中国教程摘抄

最新推荐文章于 2023-01-07 01:30:55 发布

Joyce的前端日常

最新推荐文章于 2023-01-07 01:30:55 发布

阅读量713

点赞数

分类专栏： CSS 文章标签： sass

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.使用变量

1-1.变量声明

$highlight-color:#F90;

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。

1.2.变量引用

$highlight-color:#F90;
.selected {
  border:1px solid $highlight-color;
}

//编译后

.selected {
  border:1px solid #F90;
}

1.3.变量名用中划线还是下划线分割

中划线的方式更为普遍，sass两种方法兼容，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

$link-color: blue;
a {
  color:$link_color;
}

//编译后

a {
  color: blue;
}

2.嵌套CSS规则

#content {
  background-color:#f5f5f5;
  aside {background-color: #eee }
}

/* 编译后 */
#content { background-color: #f5f5f5}
#content aside {background-color: #eee}

2-1.父选择器的标识符&

article a {
  color: blue;
  &:hover {color: red }
}
2.2.群组选择器的嵌套
1）
.container {
  h1,h2, h3 {margin-bottom: .8em}
}

/* 编译后 */
.container h1,.container h2,.container h3 {margin-bottom: .8em}

2）

nav, aside {
  a {color: blue}
}

/* 编译后 */
nav a,aside a {color: blue}

2.3.子组合选择器和同层组合选择器：>、+和~

1)子组合选择器 >

选择一个元素的直接子元素

2)同层相邻组合选择器+

选择header元素后紧跟的p元素

header +p {font-size: 1.1em}

3)同层全体组合选择器~

选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

article ~article {border-top: 1px dashed #ccc}

2.4.嵌套属性

nav {
  border: {
  style: solid;
  width:1px;
  color:#ccc;
  }
}

/* 编译后 */
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

2）

nav {
  border:1px solid #ccc {
  left: 0px;
  right:0px;
  }
}

/* 编译后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3.导入SASS文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀.这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。

3-1.使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import"themes/night-sky";。

局部文件可以被多个不同的文件引用。

3-2.默认变量值

使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px

3-3.嵌套导入

跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import"blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color:#fff;
  }
}

3-4.原生的CSS导入

由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是CSS的url()值。

这就是说，你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

4.静默注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

body {
  color:#333; // 这种注释内容不会出现在生成的css文件中
  padding:0; /* 这种注释内容会出现在生成的css文件中 */
}

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

body {
  color/* 这块注释内容不会出现在生成的css中 */: #333;
  padding:1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

5.混合器

通过sass的混合器实现大段样式的重用，混合器使用@mixin标识符定义。

@mixin rounded-corners {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

notice {
  background-color: green;
  border:2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

5-1.何时使用混合器

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。

5-2.混合器中的CSS规则

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left:0px;
  }
}

ul.plain {
  color:#444;
  @include no-bullets;
}

混合后得到：

ul.plain {
  color: #444;
  list-style: none;
}
ul.plainli {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5-3.给混合器传参

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。

@mixin link-colors($normal,$hover,$visited) {
  color:$normal;
  &:hover {color:$hover; }
  &:visited {color:$visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover {color: red; }
a:visited {color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

5-4.默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

@mixin link-colors(
    $normal,
    $hover:$normal,
    $visited:$normal
  )
{
  color:$normal;
  &:hover {color:$hover; }
  &:visited {color:$visited; }
}

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

6.使用选择器集成来精简CSS

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。

//通过选择器继承继承样式
.error {
  border:1px red;
  background-color:#fdd;
}
.seriousError {
  @extend .error;
  border-width:3px;
}

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error”。

6-1.何时使用继承

你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用sass时，我们提倡的就是不要做重复的工作。
你可以使用一个选择器组（比如说.error.seriousError）给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。
你可以使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。
综上所述你应该使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error.seriousError都会继承其中的样式。

6-2.继承的高级算法

接下来的这段代码定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

.disabled {
  color: gray;
  @extend a;
}

假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。

6-3.继承的工作细节

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

6-4.使用继承的最佳实践

不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控。

只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。

7.小结

本文介绍了sass最基本部分,你可以轻松地使用sass编写清晰、无冗余、语义化的css。对于sass提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。

变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名，可以互换通用_和-。同样基础的是sass的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。

你也已经学到了sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的css变得更加可维护和语义化。最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。