sass学习

最新推荐文章于 2024-07-22 14:10:07 发布

sun lover

最新推荐文章于 2024-07-22 14:10:07 发布

阅读量30

点赞数

文章标签： sass 学习前端 css

本文链接：https://blog.csdn.net/wonderfulgood/article/details/134760819

版权

sass学习

变量声明

1、使用$
2、注意声明的顺序
3、可以在一个变量中引用另一个变量
4、调用变量时依然使用$加变量名
示例：

//不同变量可以相互引用，但要注意声明顺序
$demo-color: pink;
$demo-border: 1px solid $demo-color;
.nav-border {
	border:$demo-border;
}

嵌套

#content {
	div{
		h1{
			border:1px solid pink;
		}
	}
}

符号 &

将该符号后面的内容与其父元素进行链接，不像平常的嵌套子元素一样与父元素是空格连接的
适用于各种伪类

article a {
color:gray;
	&:hover{
		transform:translateX(120%);
	}
}
//等同于下方样式
article a{
color:gray;
}
article a:hover {
	transform:translateX(120%);
}

群组嵌套

子元素会和父元素一一配对
反之亦然，如果父元素使用逗号隔开，那么每个父元素都会和子元素一一配对

#content,#aa{
	h1,h2 {
		border:1px solid blue;
	}
}
//等同于
#content h1,
#content h2,
#aa h1,
#aa h2{
	border:1px solid blue;
}

多种选择器

可以在嵌套层内使用多种选择器
‘+’ 相邻兄弟选择器
‘>’ 子元素选择器
‘~’后继元素选择器

#strick {
	> h1 {border-top:1px;}
	+ p {text-indent:2em;}
	th > {
		dt{margin:0;}
		dd{padding:0;}
	}
}
//等同于
#strick > h1 {border-top:1px;}
#strick + p {text-indent:2em;}
#strick th>dt{margin:0;}
#strick th>dd{padding:0;}

多属性叠写

支持多属性叠写
如果需要一次性指定border-width border-style
直接嵌套写入，注意border后面有冒号！
括号内填对应属性即可，sass编译器会自动链接

#border-test {
	border:{
		style:solid;
		width:100px;
	}
}
//等同于
#border-test {
	border-style:solid;
	border-width:100px;
}

import

import使用方法
1、导入外部scss文件，不要添加后缀.scss
2、不可以导入css文件
3、scss编译时，优先把import导入的内容进行编译并插入到输出css文件内，之后才编译本文件的内容
4、可以导入scss文件内的局部内容，譬如@import “./part/abc”
这样就导入了

!defualt

!defualt定义
如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值

如果先赋值变量，在声明默认值就不生效
如果想修改varible.scss和color.scss中的默认值，可以把赋值的变量写在config.scss
引入时：
import ‘./config.scss’
import './varible.scss
import ‘./color.scss’

$defualt-test:500px;
$defualt-test:400px !defualt;
#div1 {
	width:$defualt-test;
}
//等同于
#div1{
	width:500px;
}

mixin

@mixin 可以把他当做一个大型结构体，声明格式如下：
@mixin name {}
在任意处使用@include即可吧@mixin定义内容引入

@mixin flex($justify-content: center, $align-items: center, $flex-direction: row) {
	display: flex;
	justify-content: $justify-content;
	align-items: $align-items;
	flex-direction: $flex-direction;
}
.aa {
@include flex(flex-start,center)
}
//变量传入需按顺序传，后边的没有可以不传
//不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 … 来设置可变参数
@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(8px 1px 0px #fff, 9px 4px 2px #555);
}

mixin中可以包含嵌套结构

scss注释

普通注释//
编译后不会显示在css中
而注释/**/
编译后会显示在css内

继承 @extend

使用@extends name l来使用继承关系，引入名称（或者部分名称）为name的选择器
譬如右侧.error 会同时引入.error或 div .error 或 #c.error
在标签内使用class=“aError” 实际上解析后为class=“aError error”

.error {
border:1px solid red;
background-color:#fdd;
}
.aError{
@extend .error;
border-width:3px;
}

//等同于
.error,.aError {
border:1px solid red;
background-color:#fdd;
}
.aError{
border-width:3px;
}