Scss介绍
scss是一款 CSS 预处理语言,是sass的升级版
SCSS 和 SASS 的具体区别
SASS 是以严格的缩进式语法规则来书写,不带大括号( { } )和分号( ; ),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
// Sass语法
$font-stac: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack;
color: $primary-color; // 没有 {} 和 ;
// Scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// 编译出来的css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
SCSS在线转换: SassMeister | The Sass Playground!
Scss的基本语法
声明变量的符号 $
//scss
$color :#ffffff;
.box{
border-color:$color;
}
//编译后
.box {
border-color: #ffffff;
}
默认变量 !default
变量的值后面添加了 !default 标志 ,这意味着该变量如果已经赋值,那么它不会被重新赋值,但是,如果它尚未赋值,那么它会被赋予新的给定值
//scss
$color :#ffffff !default;
.box{
border-color:$color;
}
//编译后
.box {
border-color: #ffffff;
}
//scss
$color :#ffffff !default;
$color:#333;
.box{
border-color:$color;
}
//编译后
.box {
border-color: #333;
}
变量调变量
直接调用即可
//编译前
$color1 :#ccc;
$color2:$color1;
.box{
border-color:$color2;
}
//编译后
.box {
border-color: #ccc;
}
局部变量和全局变量
//编译前
$color1 :#ccc;
.box{
border-color:$color1;
a{
$color1:#fff;
color:$color1;
}
}
//编译后
.box {
border-color: #ccc;
}
.box a {
color: #fff;
}
选择器嵌套
//编译前
.box{
a{
color:#ccc;
}
b{
color:#fff;
}
}
//编译后
.box a {
color: #ccc;
}
.box b {
color: #fff;
}
属性嵌套
CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding等
//编译前
.box{
border:{
color:#fff;
}
margin:{
top:12px;
left:21px;
};
}
//编译后
.box {
border-color: #fff;
margin-top: 12px;
margin-left: 21px;
}
伪类嵌套&
//编译前
.box{
&:hover{
color:#fff;
}
}
//编译后
.box:hover {
color: #fff;
}
Scss的中级用法
混合宏之不带参数
//编译前
@mixin border_base_sty {
margin:{
top:20px;
left:200px;
right:300px;
};
}
.box{
@include border_base_sty
}
//编译后
.box {
margin-top: 20px;
margin-left: 200px;
margin-right: 300px;
}
混合宏之带参数
//编译前
@mixin border_base_sty($top,$left){
margin:{
top:$top;
left:$left;
right:300px;
};
}
.box{
@include border_base_sty(2px,400px)
}
//编译后
.box {
margin-top: 2px;
margin-left: 400px;
margin-right: 300px;
}
混合宏之设置默认参数
//编译前
@mixin border_base_sty($top:20px,$left:20px,$right:20px){
margin:{
top:$top;
left:$left;
right:$right;
};
}
.box{
@include border_base_sty(666px)
}
//编译后
.box {
margin-top: 666px;
margin-left: 20px;
margin-right: 20px;
}
扩展or继承【@extend】
//编译前
.text{
text-align: center;
color:#fff;
}
.box{
margin-bottom: 5px;
@extend .text
}
.contnet{
padding-top:88px;
@extend .text
}
//编译后
.text, .contnet, .box {
text-align: center;
color: #fff;
}
.box {
margin-bottom: 5px;
}
.contnet {
padding-top: 88px;
}
scss继承,是通过形成组合选择器的方式,获取要继承的样式
占位符【%】与extend搭配使用
-
单独使用’%‘占位符
//编译前
%text{
text-align: center;
color:#fff;
}
//编译后
--为空--
-
与extend搭配使用
//编译前
%text{
text-align: center;
color:#fff;
}
.box{
margin-bottom: 5px;
@extend %text
}
.contnet{
padding-top:88px;
@extend %text
}
//编译后
.contnet, .box {
text-align: center;
color: #fff;
}
.box {
margin-bottom: 5px;
}
.contnet {
padding-top: 88px;
}
%与extend搭配与extend单独使用类似,形成一个组合选择器
流程控制@if
@if语法和js类似,基本格式是@if...@else if...@else
//编译前
$num:3;
.box{
@if $num>=3{
color:#fff;
}
@else{
color:#000;
}
}
//编译后
.box {
color: #fff;
}
//编译前
$num:3;
.box{
@if $num>3{
color:#fff;
}
@else if $num==3{
color:#000;
}
@else{
margin-top:10px;
}
}
//编译后
.box {
color: #000;
}
流程控制@for
for在条件范围内重复操作,这个指令包含两种格式:
-
@for $let from <start> through <end> ==>条件范围包含 <start> 与 <end>的值
-
@for $let from <start> to <end> ==>条件范围只包含<start>的值不包含<end>的值
<start> 和 <end> 必须是整数值
//to -- 编译前
@for $index from 1 to 3 {
.box:nth-child(#{$index}) {
width: 80 * ($index - 1) + px;
}
}
//to -- 编译后
.box:nth-child(1) {
width: 0px;
}
.box:nth-child(2) {
width: 80px;
}
#{} 插值语句 ==》通过 #{} 插值语句可以在选择器或属性名中使用变量
//#{} 编译前
$name: box;
$attr: border;
.#{$name} {
#{$attr}-color: blue;
}
//#{} 编译后
.box {
border-color: blue;
}
//through -- 编译前
@for $index from 1 through 3 {
.box:nth-child(#{$index}) {
width: 80 * ($index - 1) + px;
}
}
//through -- 编译后
.box:nth-child(1) {
width: 0px;
}
.box:nth-child(2) {
width: 80px;
}
.box:nth-child(3) {
width: 160px;
}
@import 自定义导入
//common.scss 文件夹
$color:#fff;
//index.scss 文件夹
//编译前
@import "common.scss";
.box {
border-color: $color;
}
//编译后
.box {
border-color: #fff;
}
定义常量并用:export进行导出
variables.scss
:
// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;
// JS 与 scss 共享变量,在 scss 中通过 :export 进行导出,在 js 中可通过 ESM 进行导入
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
在 layout/index.vue
中使用:
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.fixed-header {
//calc() 函数,用于动态计算元素的宽度值
//在使用 calc() 函数时需要保证数学表达式中的数字、操作符和单位之间有空格分隔开
width: calc(100% - #{$sideBarWidth});
}
</style>