在接下来的系列更新中,我将逐步深入探讨Sass的强大功能和使用技巧。最终,我将通过一个简单的实践案例,学习如何利用Sass轻松实现主题切换功能。
这是本人自学sass所用资料,将陆续更新🙏感谢大家支持!
SASS语法嵌套规则与注释
语法嵌套规则
选择器嵌套
例如有这么一段css,正常CSS的写法
.container{width:1200px; margin: 0 auto;}
.container .header{height: 90px; line-height: 90px;}
.container .header .log{width:100px; height:60px;}
.container .center{height: 600px; background-color: #F00;}
.container .footer{font-size: 16px;text-align: center;}
改成写SASS的方法
.container {
width: 1200px;
margin: 0 auto;
.header {
height: 90px;
line-height: 90px;
.log {
width: 100px;
height: 60px;
}
}
.center {
height: 600px;
background-color: #F00;
}
.footer {
font-size: 16px;
text-align: center;
}
}
避免了重复输入父选择器,复杂的 CSS 结构更易于管理
父选择器 &
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。
还有一个用法,如果&写在嵌套属性后面,则会把嵌套属性提取到父选择器前面
例如有这么一段样式:
.container{width: 1200px;margin: 0 auto;}
.container a{color: #333;}
.container a:hover{text-decoration: underline;color: #F00;}
.container .top{border:1px #f2f2f2 solid;}
.container .top-left{float: left; width: 200px;}
用sass编写
.container {
width: 1200px;
margin: 0 auto;
a {
color: #333;
&:hover {
text-decoration: underline;
color: #F00;
}
}
.top {
border: 1px #f2f2f2 solid;
&-left {
float: left;
width: 200px;
}
}
}
属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中
例如:
.container a {
color: #333;
font-size: 14px;
font-family: sans-serif;
font-weight: bold;
}
用SASS的方式写
.container {
a {
color: #333;
font: {
size: 14px;
family: sans-serif;
weight: bold;
}
}
}
注意font:后面要加一个空格
占位符选择器 %foo 必须通过 @extend
有时,需要定义一套样式并不是给某个元素用,而是只通过 @extend
指令使用,尤其是在制作 Sass 样式库的时候,希望 Sass 能够忽略用不到的样式。
例如:
.button%base {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-default {
@extend %base;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-success {
@extend %base;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-danger {
@extend %base;
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
注释
Sass支持两种注释
- 标准的css多行注释 /* … */ 会编译到.css文件中
- 单行注释 // 不会编译到.css文件
.container {
width: 1200px;
.swiper {
// 网站幻灯片相关css
width: 100%;
height: 260px;
.dot {
/*
幻灯片指示点
默认白色
选中时蓝色
*/
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFF;
&.active {
background-color: blue;
}
}
}
}