网站开发代码,平面设计软件教程,江苏网站seo营销模板,百度首页优化文章目录 前言SASS缩进语法SASS的语法差异多线选择器注释import Mixin指令已弃用的语法后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正… 文章目录 前言SASS缩进语法SASS的语法差异多线选择器注释import Mixin指令已弃用的语法后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 SASS缩进语法
SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。 它使用缩进而不是 {和} 来分隔块。 要分隔语句它使用换行符而不是分号;。 属性声明和选择器必须放在一行{和}中的语句必须放在新行和缩进。
例如考虑以下SCSS代码:
.myclass {color red;font-size 0.2em;
}缩进语法是一种旧的语法不建议在新的Sass文件中使用。如果使用此文件它将在CSS文件中显示错误因为我们使用 而不是:来设置属性和变量。
使用下面的命令编译上面的代码:
sass --watch C:\ruby\lib\sass\style.scss:style.css接下来运行上面的命令它将在 style.css 文件中显示错误如下所示:
Error: Invalid CSS after color red: expected {, was ;on line 2 of C:\ruby\lib\sass\style17.scss1: .myclass {
2: color red;
3: font-size 0.2em;
4: }SASS的语法差异
大多数CSS和SCSS语法在SASS中工作完美。但是有一些差异在以下部分中解释:
属性语法 CSS属性可以通过两种方式声明: 属性可以声明为类似于CSS但没有分号;。 colon:将以每个属性名称为前缀。
例如您可以写为:
.myclass:color red:font-size 0.2em默认情况下可以使用上述两种方法属性声明不带分号冒号以属性名称开头。
多线选择器
在缩进语法中选择器可以在逗号后出现时放在换行符上。
例子 下面的示例描述了在SCSS文件中使用多行选择器:
html
headtitleMultiline Selectors/titlelink relstylesheet typetext/css hrefstyle.css /link relstylesheet hrefhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.cssscript src/attachments/tuploads/sass/jquery.min.js/scriptscript src/attachments/tuploads/sass/bootstrap.min.js/script
/head
bodyh2Example using Multiline Selectors/h2p classclass1Welcome to Tutorialspoint!!!/pp classclass2SASS stands for Syntactically Awesome Stylesheet.../p
/body
/html接下来创建文件 style.scss。 请注意 .scss 扩展名。
style.scss
.class1,
.class2{color:red;
}您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css接下来执行上面的命令它将用下面的代码自动创建 style.css 文件:
生成的 style.css 如下所示:
style.css
.class1,
.class2 {color: red;
}让我们执行以下步骤看看上面的代码如何工作: 在 multiline_selectors.html 文件中保存html代码。 在浏览器中打开此HTML文件将显示如下输出。
注释
注释占用整行并包围嵌套在它们下面的所有文本它们是基于行的缩进语法。
import
在SASS中 import 指令可以使用/不使用引号。与SCSS不同它们必须使用引号。
例如在SCSS中 import 指令可以用作:
import themes/blackforest;
import style.sass;这可以在SASS中写为:
import themes/blackforest
import fontstyle.sassMixin指令
SASS支持 mixin 和 include 等指令的缩写。您可以使用 和 字符替换 mixin 和 include 更简单更容易阅读。
例如您可以将mixin指令写为:
myclassfont-size: 12px;pmyclass是相同的
mixin myclassfont-size: 12px;pinclude myclass已弃用的语法
SASS支持使用一些旧的语法。但是在SASS中使用此语法是不推荐。如果您使用此语法将显示警告并且将在以后的版本中删除它。一些旧的语法如下表所示。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
