sass基本

Sass 变量

1、变量用于存储一些信息,它可以重复使用。

2、Sass 变量可以存储以下信息:

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

3、Sass 定义变量使用 $ 符号:

$bg-color:#ff6700;

4、使用变量

div{
background-color:$bg-color;}

Sass父选择器的标识符&

/* Sass代码 */
article a {
  color: blue;
  :hover {
    color: red
  }
}
/* 编译后 */
article a {color: blue;}
article a :hover{color: red}

看到了a:hover之间是有一个空格的,这与a:hover是完全不同的作用范围。

/* Sass代码 */
article a {
  color: blue;
  &:hover {color: red}
}
/* 编译后 */
article a {color: blue}
article a:hover {color: red}

群组选择器嵌套

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

对于内嵌在群组选择器内的嵌 套规则,处理方式也一样:

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

属性嵌套

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

对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:

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

定义一个混入

混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }

// 以下实例创建一个名为 "important-list" 的混入:
@mixin important-list {
    color: aquamarine;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid greenyellow;
}

@include 指令可用于包含一混入:

@include important-list;

@mixin important-list {
    color: aquamarine;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid greenyellow;
}
 
.box {
    @include important-list;
    background-color: pink;
}

混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入:

@mixin bordered($color, $width) {
    border: $width solid $color;
  }
  .box{
      @include bordered(pink, 1px)
  }
  .box1{
      @include bordered(#a5a5a5, 10px)
  }

Sass @extend 与 继承、

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。

以下 Sass 实例中,我们创建了一个基本的按钮样式 .button-basic,接着我们定义了两个按钮样式 .button-report 与 .button-submit,它们都继承了 .button-basic ,它们主要区别在于背景颜色与字体颜色,其他的样式都是一样的。

button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
 
.button-report  {
  @extend .button-basic;
  background-color: pink;
}
 
.button-submit  {
  @extend .button-basic;
  background-color:yellow;
  color: white;
}

 

posted @ 2021-04-26 14:11  青眼魔术  阅读(51)  评论(0编辑  收藏  举报