Sass笔记

最新推荐文章于 2022-04-22 13:59:37 发布

不知所云_

最新推荐文章于 2022-04-22 13:59:37 发布

阅读量205

点赞数 1

分类专栏： VUE 文章标签： sass scss

本文链接：https://blog.csdn.net/u012864281/article/details/85071793

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Sass 是成熟、稳定、强大的css预处理器，而SCSS 是Sass 3版本当中引入的新语法特性，完全兼容css3的同时继承了sass强大的动态功能。在规模较大的web引用中，使用css容易造成选择器层叠的复杂度过高，因此推荐通过Sass预处理器进行开发。

Sass特性：变量、嵌套、混合、继承等。

SCSS 特点：需要使用分号和花括号而不是换行和缩进；SCSS 对空白符号不敏感。

安装

cnpm install node-sass --save-dev 

cnpm install sass-loader@7.3.1 --save-dev   // 最新版本会报错

配置：webpack.base.conf.js

module -> rules 添加

{
   test: /\.scss$/,
   loaders: ["style", "css", "sass"]
}

变量

sass让人受益的一个重要特性就是它为css引入了变量。我们可以把反复使用的css属性值定义为变量，然后通过变量名来引用。

1、变量声明（可以声明在css规则块定义之外，也可以声明在规则块以内，类似全局变量和局部变量）

使用标识符 $ 例： $highlight-color:red;

任何可以用作css属性值的赋值都可以用作sass的变量值，多个属性值时可以用空格分隔，也可以用'、' 分隔

2、变量引用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

//变量值也可以引用其他变量
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

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

3、变量名中中划线和下划线含义一样，相互兼容

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

//编译后

a {
  color: blue;
}

嵌套

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID。像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

1、一般嵌套

#content {
  background-color: #f5f5f5;
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

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

2、父选择器标识符&

一般情况下，sass在解开一个嵌套规则时就会把父选择器通过一个空格连接到子选择器的前边，而对于伪类,后代选择器的这种方法是无法生效的。由此sass提供&，使用&标识父选择器，当打开嵌套规则时，不会像后代选择器一样进行拼接，而是用父选择器替换&

article a {
  color: blue;
  &:hover { color: red }
}

/*编译后*/
article a { color: blue }
article a:hover { color: red }

父选择器还可以用于在父选择器前添加选择器。例，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

3、群组选择器嵌套

在css中经常使用到群组选择器（以逗号隔开）,如果我们需要在一个特定的容器内对群组选择器进行修饰或者内嵌在群组选择器内的嵌套规则，可以使用sass重新组合一个群组选择器

css:
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav a, aside a {color: blue}

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

nav, aside {
  a {color: blue}
}

使用群组选择器时需要注意群组选择器的嵌套规则生成的css,sass可能看上去很小，但实际生成的css很大，这会降低网站的速度。

4、组合选择器

对应 > 、+ 和 ~选择器可以放在外层选择后边，也可以放在层选择器前边

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 }

5、嵌套属性

在sass中，除了CSS选择器，属性也可以进行嵌套。嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后面添加冒号:{}，把属性值写在{}中

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

混合

如果我们有大段不断复用的样式，变量已经无法满足我们的要求，而混合器可以帮助我们解决，我们可以把混合器看做一个公用的函数。

混合器使用@mixin标识符定义。在样式表中通过@include调用

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

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

混合器不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。

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

混合器不一定总是同一个样式，可以像函数一样给混合器传参

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

/*参数顺序固定*/
a {
  @include link-colors(blue, red, green);
}
/*参数顺序不定*/
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

设置默认参数，这样就不必传入所有参数

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

继承

选择器继承可以减少重复，选择器继承就是一个选择器可以继承另一个选择器定义的所有样式，还包括任何和这个选择有关的组合选择器样式以组合选择器的形式继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

任何css规则都可以继承其它规则。高级用法：继承html元素的样式，尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是我们对html元素添加的所有样式会被继承。

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

跟混合器相比，继承生成的css相对更少，因为继承仅仅是重复选择器而不是重复属性。所以继承往往比混合器生成的css体积小。但是继承可能会让生成的css中包含大量的选择器复制，为了避免这种情况出现，尽量不要在css规则中使用后代选择器

扩展（导入sass文件）

sass使用@import导入其他sass文件，但是sass的@import规则在生成css文件是就把相关文件导入进来。被导入文件可以省略后缀。

1、在专门为@import写的sass文件，并不需要生成独立的css文件，这样的文件叫局部文件，文件名以下划线开头，这样就不会在编译时单独编译这个文件输出css，在引入的时候可以去掉下划线引入。

2、在反复声明一个变量时，只有最后一个生效且会覆盖前面的值。如果我们想通过@import引入的文件修改某些值，使用sass的 !default 标签可实现。！default 用于变量，含义是如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

3、@import可以在css规则内引用

4、支持原生的css@import

不知所云_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sass笔记

Sass 是成熟、稳定、强大的css预处理器，而SCSS 是Sass 3版本当中引入的新语法特性，完全兼容css3的同时继承了sass强大的动态功能。在规模较大的web引用中，使用css容易造成选择器层叠的复杂度过高，因此推荐通过Sass预处理器进行开发。Sass特性：变量、嵌套、混合、继承等。SCSS 特点：需要使用分号和花括号而不是换行和缩进；SCSS 对空白符号不敏感。变量...
复制链接

扫一扫