sass

最新推荐文章于 2024-05-15 17:15:09 发布

qq_26144233

最新推荐文章于 2024-05-15 17:15:09 发布

阅读量170

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_26144233/article/details/112408955

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.变量

1-2. 变量引用;
（1）凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。
（2）scss中变量存在作用域，在不同{}中变量作用域不同。
（3）可以在一个变量中引用另一个变量。

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

//编译后

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

（4）特例

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

2.嵌套CSS 规则

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

最常见的一种情况是当你为链接之类的元素写**：hover这种伪类**时，你并不希望以后代选择器的方式连接。

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

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
&表示父级

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

在为父级选择器添加：hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

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

2-3. 子组合选择器和同层组合选择器：>、+和~;

同层相邻组合选择器 +
同层全体组合选择器 ~
直接子类选择器 >
可以用同层相邻组合选择器+选择header元素后紧跟的p元素：

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

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

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass会如你所愿地将这些嵌套规则一一解开组合在一起：

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 }

2-4. 嵌套属性;

选择器后面加:，表示变成属性中的一部分，不再是选择器：

nav {
  border:  {
  left: 0px;
  right: 0px;
  }
}
//编译后
nav { border-left: 0px; border-right: 0px; }

3.导入SASS文件

3-1. 使用SASS部分文件;

如果scss文件只做导入使用，而不必生成对应的css文件时，可使得文件名以_开头，使用@import将该scss文件导入其他scss文件中，该文件可以不写后缀，可以不加下划线_。
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

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

3-2. 默认变量值;

!default表示声明该值是默认值。
假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

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

//module.scss
@import 'common'
//当module.scss中之后声明 $fancybox-width时，使用module.scss文件中$fancybox-width；否则使用common.scss文件中$fancybox-width。

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

3-3. 嵌套导入;

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

aside {
  background: blue;
  color: white;
}

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

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

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

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

4.混合器@mixin

作用：实现一段代码的复用
作用对象：css代码块
需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合器声明定义：

@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; }

5.继承

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

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

参照：https://www.sass.hk/guide/

qq_26144233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sass

1.变量1-2. 变量引用;（1）凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。（2）scss中变量存在作用域，在不同{}中变量作用域不同。（3）可以在一个变量中引用另一个变量。$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}//编译后.selected { border: 1
复制链接

扫一扫