常用的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;
}
