sass语法一(变量篇)

Posted xg123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sass语法一(变量篇)相关的知识,希望对你有一定的参考价值。

文件后缀名


sass有两种后缀名的文件:一种后缀名为sass,不使用大括号和分号;另一种是我们这里使用的scss文件,这种和我们平时使用的css文件格式差不多,使用大括号和分号。

//后缀名为sass的文件
body
    background: #eee
    font-size: 14px

//后缀名为scss的文件
body {
    background: #eee;
    font-size: 14px;
}

导入


sass的导入(@import)的规则和css不同,编译时会将@import的scss文件的内容合并进来,只生成一种css文件,但是如果你在scss文件中使用@import导入css文件;例如: @import ‘reset.css‘ ,那效果就和普通css导入一样,导入的css文件不会合并到编译后的文件中,而是以 @import 方式存在;

所有的scss导入文件都可以忽略后缀名 .scss 。一般来说基础的文件命名方式都是以下划线_开头,如 _mixin.scss 。这种文件在导入的时候可以不写下划线,可写成 @import ‘mixin‘; 

被导入的scss文件 a.scss

//_a.scss

body {
    background: #eee;
}

需要导入样式的scss文件 b.scss

@import ‘reset.css‘; //导入reset.css
@imort ‘a‘;//导入a.scss文件

p {
    background: #ccc;
}

编译出来的b.css样式:

@import ‘reset.css‘;
body {
    background: #eee;
}
p {
    background: #ccc;
}

根据上面的代码可以看出,b.scss编译后,a.scss直接合并到了编译文件中,但是reset.css仍然保持@import的方式

注释


sass有两种注释方法,一种是标准的css注释方式 /**/,另一种是//双斜杠形式的单行注释,不过这种单行注释不会被编译出来

标准的css注释

/*
*我是css标准注释
*设置p标签背景色
*/

p {
    background: #ccc;
}

双斜杠单行注释

//我是单行注释
//设置p标签背景色
p {
    background: #ccc;
}

变量


sass的变量必须以$开头,后面紧跟变量名,而变量值与变量名之间以冒号“:”隔开(就像设置css属性一样),如果值后面加上!default 则表示默认值;

普通变量

定义之后可以在全局使用它

//sass style

$font-base: 14px;

p {
    font-size: $font-base;
}

//css style

p {
    font-size: 14px;
}

默认变量

sass的默认变量只需要在值后面加上 !default  即可

// sass style

$base-lineHeight: 1.5 !default;
body {
    line-height: $base-lineHeight;
}

//css style

body {
    line-height: 1.5;
}

sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要重新定义一下就可以了

//sass style
/*
*覆盖的顺序没有限制,可以在默认变量的后面也可以在前面
*/

$base-lineHeight: 1.5 !default;
$base-lineHeight: 2;
body {
    line-height: $base-lineHeight; 
}

//css style

body {
    line-height: 2;
}

可以看出编译完成的 line-height: 2; 而不是 line-height: 1.5; 。默认变量的价值在组件化开发的时候非常有用。

特殊变量

一般我们定义的变量都是属性值,可直接使用,但是如果变量作为属性的时候,我们就不能像之前那样使用了,比需要 #{$variable} 的形式使用

//sass style

$border-direction: top !default;
$base-fontSize: 14px !default;
$base-lineHeight: 1.5 !default;

//应用class和属性
.border-#{$border-direction} {
    border-#{$border-direction}: 1px solid #ccc;  
}
//应用复杂的属性
body {
    font: #{$base-fontSize}/#{$base-lineHeight};
}
//css style

.border-top {
    border-top: 1px solid #ccc;
}
body {
    font: 14px/1.5;
}

局部变量

sass在3.4版本之前没有类似于局部变量,但是在3.4版本之后就出现了局部变量,类似于函数的定义方式,在大括号之外的变量为全局变量(设置了 !global 变量的例外,一会儿提到),在大括号之内的变量只会作用于大括号范围内的变量;

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 12px;
}

由于在p标签声明的变量是局部变量,所以影响不到外面的变量,body标签的字体大小还是12px;

全局变量

全局变量相对于局部变量,声明变量的位置在大括号外面,或者在大括号内使用了 !global 也会成为全局变量;

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px !global;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 14px;
}

 

 

 

 

 

 

以上是关于sass语法一(变量篇)的主要内容,如果未能解决你的问题,请参考以下文章

sass的高级语法

学习Sass笔记之概念篇

每日分享

Sass 基础教程——预处理器

Sass 基础教程——预处理器

Sass 基础教程——预处理器