sass基础知识

最新推荐文章于 2023-06-14 11:57:21 发布

Mr.jiang.

最新推荐文章于 2023-06-14 11:57:21 发布

阅读量217

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/jiangyoufu123456789/article/details/114215162

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 变量

声明变量，作用域只在当前{ }之中有效，当前{ }之外效果。
```
$link-text {
     color: #1890ff
}
```

变量引用

$link-text {
      color: #1890ff
}
.parent-dom {
     li {
          border: 1px solid $link-text 
     }
}

变量名用中划线还是下划线分隔：都可以使用，建议用中划线。
```
 $link-color: blue;
```

2.嵌套规则

父选择器的标识符&：&相当于拿到当前节点的父选择器。

//例：将test-dom 中的li加上鼠标移入效果?
//错误案例，这导致.test-dom li的所有子元素都加上了hover效果。
.prent-dom li{
    :hover {
       color: red; 
    }
} 
//正确处理：利用&拿到父选择器
.parent-dom li{
    &:hover {
       color: red; 
    }
}

群组选择器的嵌套。

.parent-dom {
    li,p,h {  
         } 
}
.parent-dom {
    li {
       span,strong {
       }
     } 
}

子组合选择器、同层组合选择器：> + ~；

<li>
  <span class="child">
     <span class="child4"></span>
  </span>
  <strong class="child1"></strong>
  <span class="child2"></span>
  <span class="child3"></span>
</li>


// >：找到离当前节点最近一级的子元素集合。
li > span { } //得到节点  .child、.child1、.child2、.child3， 没有.child4

// +：找到当前节点紧邻的下一个同级节点。
.child + strong { } //得到节点 .child1
.child + span { }   //没有拿到节点，因为同级下一个节点是strong。

// ~：找到当前节点之后， 所有指定的同层节点。
.child span { }  //得到节点 .child2 、 .child3

嵌套属性！= 嵌套选择

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

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

3.导入SASS文件：@import “css文件所在路径”;

只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

使用SASS部分文件
1. 部分文件:不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当sass的文件名是以_下划线开头，说明是sass部分文件。
2. 如何导入themes/_night-sky.scss这个局部文件里的变量:只需在样式表中写@import “themes/night-sky”,不需要下划线。

默认变量值: !default。

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

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

嵌套结构中使用导入：允许@import命令写在嵌套结构中，导入的变量、混合只在当前导入位置的{}之内有效。

//例：有一个名为_blue-theme.scss的局部文件，内容如下：
aside {
  background: blue;
  color: white;
}
//然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//aside只能在.bule-theme中有效，之外无法用。

4.静默注释：可以用//来注释。

```less

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

5.混合器：通过sass的混合器实现大段样式的重用。

定义混合器：@mixin “选择器名称”。
引用混合器：@include “选择器名称”。

混合器中的CSS规则：混合器中不仅是可以放属性（样式），还可以放选择器和选择器中的属性（样式）。混合器中的规则甚至可以使用sass的父选择器标识符&

//声明混合器
@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;
}

给混合器传参：跟JavaScript的function很像。

//声明混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//调用混合器
a {
  @include link-colors(red，blue，yellow);
}
//调用混合器的时候，使用key: value的形式传参数，这样就不用考虑传参顺序问题。（对比默认参数）
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

默认参数：声明混合器接受参数时，使用key：默认value 的声明形式。

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
   @include link-colors(red); //$hover和$visited也会被自动赋值为red
}

6. 使用选择器继承来精简CSS：@extend css选择器。

区别混合器：混合器相当于js中的函数，声明完，要有调用，混合器中的样式，选择器才能起作用。

继承选择器是如何工作的：
- 如下案例，@extent .error会将当前的.seriousError拿去跟存在.error的选择器(只有选择器中有.error就行)按照组合选择器的方式进行处理。
- 注意：按照组合选择器处理的时候，.seriousError的选择器会处理成跟.error选择器的结构一致(简单理解：就是.error会被替换成.seriousError,选择器其他结构不变)。
```
.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; }
```
继承复杂的选择器： Class 选择器并不是唯一可以被继承的，可以继承何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^=“http://”] 等。
```
.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
//编译后
.comment a.user:hover,.comment user.hoverlink  {
  font-weight: bold;
}
```

多重继承：可以继承多个选择器。多重继承可以使用逗号分隔选择器名。

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

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

.seriousError {
  border-width: 3px; }

继承：不仅只是继承样式，还会继承内部用到的选择器(理解：继承不只是简单的样式继承，得实现父级所有能做到的事情，如被继承体内部选择器的鼠标移入效果)；

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
//编译后
#fake-links .link {
  @extend a;
}
a,#fake-links .link {
  color: blue;
  a:hover,#fake-links .link:hover { 
    text-decoration: underline;
  }
}

Mr.jiang.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sass基础知识

1. 变量声明变量，作用域只在当前{ }之中有效，当前{ }之外效果。$link-text { color: #1890ff}变量引用$link-text { color: #1890ff}.parent-dom { li { border: 1px solid $link-text }}变量名用中划线还是下划线分隔：都可以使用，建议用中划线。 $link-color: blue;2.嵌套规则父
复制链接

扫一扫