常用的scss选择器和scss常用方法

常用的scss选择器

scss 选择器

1、>，表示里面紧跟，即里面的第一个。

div > p { color: pink; }
div里紧跟着的p；即div里第一个p
 
div p { color: orange; }
div里的所有p；

2、+，表示后面紧跟 同一父级）。

h2 + p { color: pink; }
 h2后紧跟着的p

3、~，表示后面所有同层

div ~ div { color: pink; }
选择所有跟在div后的同层div元素，不管它们之间隔了多少其他元素

4、相邻选择器
在CSS选择器中还有一种是相邻兄弟选择器+
选择 label和 紧挨着label的input[type='text'] 元素。

lable {
    color: green;
 
    & + input[type="text"] {
        border: 1px solid green;
    }
}

5、 群组选择器

.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}

编译后

.cla1, .cla2, .cla3 {
    width: 100%;
}

6、 子代（类）选择器

.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}

编译后

.cla1>.cla2>.cla3 {
    width: 100%;
}

7、 后代（类）选择器

.cla1 { .cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla3 {
    .cla1 & {
        width: 100%;
    }
}

编译后

.cla1 .cla3 {
    width: 100%;
}

8、 自定义类（BEM）的选择

//之前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}

编译后

.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}

9、属性的选择

.cla1 {
    border: {
        width: 1px;
        style: soild;
        color: #ffffff;
    }
}

编译后

.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}

css 变量的使用

:root {
    --color: #F00;
}
p {
    color: var(--color);
}

scss !default关键词

可以在变量的结尾添加!default来给变量设置默认值，有点类似Javascript的逻辑运算符let content=content || "Second content"。注意，变量是 null时将视为未被!default赋值。

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

scss 运算符 @if

$theme:"blue";
 
.container {
    @if $theme=="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}
 
.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

scss 语句@for 和 @each使用过方法差不多

@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}

scss @while语句的使用

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}

在scss中，以下三种情况会进行除法运算：

• 如果值或值的一部分，是变量或者函数的返回值；
• 如果值被圆括号包裹；
• 如果值是算数表达式的一部分。

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数
    height: (500px/2); // 使用了括号
    margin-left: 5px + 8px/2px; // 使用了+表达式
}

scss插值语句

通过 #{} 插值语句可以在选择器、属性名、注释中使用变量，使用#{}插值语句将变量包裹起来即可，和js中的模板字符串很像。

$font-size: 12px;

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

scss @import语句

scss允许同时导入多个文件，例如同时导入 rounded-corners 与text-shadow 两个文件，不用再单独写个import引入。

@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{} 插值语句

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

scss 嵌套@import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用@import，其实，也可以将@import 嵌套进内层选择器或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中，存在作用域。
common.scss

.example {
    color: red;
}

index.scss

#main {
    @import "example";
}
```最后被编译为
```scss
#main .example {
    color: red;
}

scss @media 媒体查询增强 嵌套

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

最后被编译为

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

scss @mixin语句的使用

// 定义一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}

scss @extend继承的使用

.btn{
  font-size:14px;
}
.text-center{
  text-align: center;
}
.btn-default{
  @extends .btn;
  @extends .text-center;
  color: red;
}