sass的语法格式和基本特性

最新推荐文章于 2024-06-07 01:28:45 发布

置顶 bbiu~biu~

最新推荐文章于 2024-06-07 01:28:45 发布

阅读量3k

点赞数 4

分类专栏： sass学习文章标签： sass 前端

本文链接：https://blog.csdn.net/qq_45784580/article/details/104387612

版权

sass学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

五、语法格式

1、sass语法格式
是sass的最初语法格式，是通过tab键控制缩进的一种语法规则，对锁紧要求非常严格，而且不带有任何的分号和大括号，把这种语法格式成为sass老版本，其文件名以 “.sass”为扩展名
在这里插入图片描述

2、scss语法格式
scss是sass的新语法格式，从外形上来判断他和css几乎是一样的，代码都包裹在一对大括号里，并且末尾结束出都有一个分号，其文件名以 “.sass”为扩展名

不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同，来看一个简单的对比图：
在这里插入图片描述
3、父选择器
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为：

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为：

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为：

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

六、sass编译

1、命令编译

单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
在这里插入图片描述
多文件编译：sass sass/:css/

自动监测：sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2、GUI界面工具编译

Koala (http://koala-app.com/) **
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）**
Prepros（https://prepros.io/）

3、自动化编译

Grunt：Grunt 配置 Sass 编译的示例代码
在这里插入图片描述
Gulp：Gulp 配置 Sass 编译的示例代码

七、不同样式的输出方式

1、嵌套输出方式 nested
在这里插入图片描述
2、展开输出方式 expanded

3、紧凑输出方式 compact

4、压缩输出方式 compressed

八、sass声明变量

1、声明变量

美元符号“$”开头
在这里插入图片描述
2、普通变量与默认变量

普通变量：定义之后可以在全局范围内使用
在这里插入图片描述
默认变量：sass 的默认变量仅需要在值后面加上 !default 即可

3、局部变量和全局变量

//SCSS（代码演示）
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

全局变量：定义在元素外面的变量（$color: orange !default;）

局部变量：定义在元素内部的变量（ $color: red;）

九、注释、数据类型、数组、运算

1、注释

/* * / 多行注释
// 单行注释
Sass 支持标准的 CSS 多行注释，以及单行注释，多行注释会被完整输出到编译后的 CSS 文件中，单行注释则不会

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译为：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

2、数据类型

SassScript 支持 6 种主要的数据类型：

数字：1, 2, 13, 10px
字符串：有引号字符串与无引号字符串，“foo”, ‘bar’, baz
颜色：blue, #04a3f9, rgba(255,0,0,0.5)
布尔型：true, false
空值：null
数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps：相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

3、数组
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。

当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。

用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

4、运算

4.1 数字运算

（一）、加法
加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：

$main-color:red;
body{
    margin: 0;
    padding: 0;
    h1{
			  border: 1px solid;
        font-size: 2rem;
        color: $main-color;
        text-decoration: underline;
				width: 20px+2in;
    }
}

编译为：

body {
  margin: 0;
  padding: 0;
}
body h1 {
  border: 1px solid;
  font-size: 2rem;
  color: red;
  text-decoration: underline;
  width: 212px;
}

（二）、减法
Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：

$main-color:red;
$full-width: 960px;
$sidebar-width: 700px;
body{
    margin: 0;
    padding: 0;
    h1{
			  border: 1px solid;
        font-size: 2rem;
        color: $main-color;
        text-decoration: underline;
				width: $full-width - $sidebar-width
    }

编译为：

body {
  margin: 0;
  padding: 0;
}
body h1 {
  border: 1px solid;
  font-size: 2rem;
  color: red;
  text-decoration: underline;
  width: 260px;
}

（三）、乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

body{
    margin: 0;
    padding: 0;
    h1{
		  border: 1px solid;
		  width: 100px * 2px
    }
}

如果这样写，就会报错，这时要注意：两个值单位相同时，只需要为一个数值提供单位即可
修改成：

body{
    margin: 0;
    padding: 0;
    h1{
		 border: 1px solid;
		  width: 100px * 2
    }
}

编译出来的width就为200px
Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错,所以我们在运算的时候，要多注意些

（四）、除法
Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错，要修正这个问题，只需要给运算的外面添加一个小括号( )即可

body{
    margin: 0;
    padding: 0;
    h1{
			border: 1px solid;
			width: (1000px / 2)
    }
}

编译出来的结果自然就为 500px
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为：

p {
  font: 12px/30px; }

4.2 颜色运算

 h1{
	color: #010203 + #040506;
	color: #010203 * 2;
	color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
 }

编译为：

h1{
      color: #050709;
      color: #020406;
      color: rgba(255,255, 0, 0.75);
}

4.3 字符串运算

$value: null;
 h1{
		cursor: e + -resize;  //+ 可用于连接字符串
		content: "Foo " + Bar; //注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
		font-family: sans- + "serif";
		margin: 3px + 4px auto; //运算表达式与其他值连用时，用空格做连接符：
		content: "I ate #{5 + 10} pies!"; //在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：
		content: "I ate #{$value} pies!"; //空的值被视作插入了空字符串：
 }

编译为：

h1 {
  cursor: e-resize;
  content: "Foo Bar";
  font-family: sans-serif;
  margin: 7px auto;
  content: "I ate 15 pies!";
  content: "I ate  pies!";
}

4.4 布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
4.5 圆括号

h1{
	width: 1em + (2em * 3);
}

编译为：

h1{
	width: 7rem;
}

函数
SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p {
  color: hsl(0, 100%, 50%);
}

编译为：

h1 {
  color: #ff0000; }

6、关键词参数
Sass 函数允许使用关键词参数 (keyword arguments)，

h1 {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

bbiu~biu~

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
sass的语法格式和基本特性

五、语法格式1、sass语法格式是sass的最初语法格式，是通过tab键控制缩进的一种语法规则，对锁紧要求非常严格，而且不带有任何的分号和大括号，把这种语法格式成为sass老版本，其文件名以 “.sass”为扩展名2、scss语法格式scss是sass的新语法格式，从外形上来判断他和css几乎是一样的，代码都包裹在一对大括号里，并且末尾结束出都有一个分号，其文件名以 “.sass”为...
复制链接

扫一扫