【WebStyle】—— SASS/SCSS基础

最新推荐文章于 2022-08-20 22:19:48 发布

MaiXiaochai

最新推荐文章于 2022-08-20 22:19:48 发布

阅读量314

点赞数

分类专栏： WebStyle 文章标签： scss sass 基础样式语法

本文链接：https://blog.csdn.net/maixiaochai/article/details/102891755

版权

WebStyle 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

更新日志：

[2019-11-4]
文章发布

说明：

本文地址
《【WebStyle】—— SASS/SCSS基础》https://blog.csdn.net/maixiaochai/article/details/102891755

关于 MaiXiaochai
CSDN：https://blog.csdn.net/maixiaochai
GitHub：https://github.com/MaiXiaochai

SCSS/SASS基础

SCSS和SASS的关系

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。

1. 变量

变量声明

$highlight-color: #F90;

/*带空格的属性值*/
$basic-border: 1px solid black;

/*带*/
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

/*在声明时引用其它变量*/
$highlight-border: 1px solid $highlight-color;

变量使用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用
- width: $width;

2.嵌套规则

嵌套样例

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
/*编译成CSS*/
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父选择器，标识&，在处理伪类(:hover这种)时，非常有用

/*
这意味着color: red这条规则将会被应用到选择器article a :hover，
article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的
你想把这条规则应用到超链接自身
*/
article a {
  color: blue;
  :hover { color: red }
}

article a {
  color: blue;
  &:hover { color: red }
}
/*
这两者最大的区别在于 a 与 :hover 之间有没有空格，
是否有空格区别很大
*/
article a :hover{color: red} /* 有空格，表示所有 a 内的元素都变红*/
article a:hover{color: red} /* 没有空格，表示只有 鼠标悬浮于a上时候，a元素才会变红*/

父选择器之前添加选择器，选择特定位置的元素

#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译为CSS*/
#content aside {color: red};
body.ie #content aside { color: green } /*这行定位到 类名含有"ie"的body下的、id为 content元素，
										而不是所有id 为 content 的元素*/

群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

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

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

子组合选择器和同层组合选择器: >、+ 、~

/*
第一个选择器会选择article下的所有命中section选择器的元素。
第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
*/
article section { margin: 5px }
article > section { border: 1px solid #ccc }

/*
同层相邻组合选择器 + 选择header元素后紧跟的p元素
*/
header + p { font-size: 1.1em }

/*
同层全体组合选择器~，选择所有跟在article后的同层 article元素，不管它们之间隔了多少其他元素
*/
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
/*等价于*/
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性

把属性名从中划线-的地方断开（中划线也被去掉了），在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中

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

/*等价于*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对意外规则的指明

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

/*等价于*/
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3.导入SASS文件

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）

使用SASS部分文件
- 局部文件
  
  当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。
- 局部文件约定
  
  sass局部文件的文件名以下划线开头。
  
  这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
- 当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

默认变量值

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

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

嵌套导入

跟原生的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;
  }
}

原生的CSS导入

由于sass兼容原生的css，所以它也支持原生的CSS@import

在下列三种情况下会生成原生的CSS@import
- 被导入文件的名字以.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文件中。它们以//开头，注释内容直到行末。

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

5.混合器

混合器实现大段样式的重用

定义一个混合器(关键词 @mixin)

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

使用混合器(关键词 @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;
}

注意

实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。
什么时候使用混合器

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

混合器中的CSS规则

// 定义混合器
@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.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

给混合器传参

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。

当@include混合器时，参数其实就是可以赋值给css属性值的变量。

// 声明可传参数的混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 使用混合器
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
  );
}
```

默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。

参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用

//声明默认值参数
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 调用
//$hover和$visited也会被自动赋值为red。
@include link-colors(red)

6.选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式

关键词 @extend

继承样例

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

//.seriousError将会继承样式表中任何位置处为.error定义的所有样式。
//以class="seriousError" 修饰的html元素最终的展示效果等价于class="seriousError error"(这里没有重写父选择器样式)
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，
任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

 //.seriousError从.error继承样式
  //要结合上段代码进行理解
  .error a{  //应用到.seriousError a
    color: red;
    font-weight: 100;
  }
  
  h1.error { //应用到hl.seriousError
    font-size: 1.2rem;
  }
  //在class="seriousError"的html元素内的超链接也会变成红色和粗体

什么时候使用继承

当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承最合适。

父类的样式分散在样式表的不同地方，这时候用继承的话，可以把这些一起继承过来
继承的高级用法

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

参考文章

https://www.sass.hk/guide/

The end.

MaiXiaochai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【WebStyle】—— SASS/SCSS基础

更新日志：[2019-11-4]文章发布说明：本文地址《【WebStyle】—— SASS/SCSS基础》https://关于 MaiXiaochaiCSDN：https://blog.csdn.net/maixiaochaiGitHub：https://github.com/MaiXiaochaiSCSS/SASS基础SCSS和SASS的关系...
复制链接

扫一扫

专栏目录