发表于: 2021-04-09 21:59:19

1 1018


今天完成的事情:sass语法学习,使用sass完成了任务十一。
明天计划的事情:完成任务十二,总结。任务十一,十二深度思考。

收获:

sass使用:它是CSS的一种预处理器,CSS的扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。

sass 扩展了CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

sass 生成良好格式化的 CSS 代码,易于组织和维护。sass 文件后缀为 .sass

sass变量:可以储存(字符串,数字,颜色值,列表,布尔值,null值)。sass变量时用" $ "符号。

sass代码:                                              

$myColor: red;
$myFontSize: 18px;
body {
  font-size: $myFontSize;
  color: $myColor;
}

转换的CSS代码:

body {

    font-size: 18px;

    color: red;

}

sass 的 @import:

@import 指令可以让我们导入其他文件等内容。

sass @import指令:(@import  "filename").可将其他文件夹中的代码带进来自己的sass中使用,从而生成CSS文件,实现网页开发。

sass 的 @mixin(混入) 与 @include:

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式代码。

@include 指令可以将混入(mixin)引入到文档中。

我们可以写一些,可多次使用的样式。用@mixin指令定义;然后在需要用到这些样式的选择器上,用@include带入。

sass 的 @extend 与 继承:

@extend 指令告诉 sass ,一个选择器的样式,从另一选择器继承。

因一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 很好用。

两个选择器内的样式代码几乎一样时,使用@extend 指令,让其中一个选择器继承另一个选择器内的样式。略有差别时,单独修饰样式即可。








返回列表 返回列表
评论

    分享到