标签:blue 文件 变量 sass color 导入 css
声明变量
sass 的变量声明,使用的是 $
关键符
$highlight-color: #F90;
任何可以用作 sass 的变量值,甚至是以空格分隔的多个属性值,或以逗号分隔的多个属性值
$basic-border: 1px solidblack;
$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"
引用变量
声明好的变量,可以直接引用在 css 属性中:
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
关于变量名用中划线还是下划线,sass 中是可以互通的,即中划线 = 下划线
$link-color: blue;
a {
color: $link_color;
}
// 编译后
a {
color: blue;
}
默认变量值
一般情况下,在反复声明一个变量后,只有最后一处声明有效的变量会覆盖前面的值:
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
假如你写了一个可被他人通过 @import
导入的 sass 库文件,你可能希望导入者可以定制修改 sass 库文件中的某些值。
在不考虑默认覆盖和重写的方案,可以使用 !default
关键词
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
如果用户在导入你的库文件前定义了一个 $fancybox-width
变量,那么你的局部文件中对 $fancybox-width
赋值 400px
的操作就无效。如果用户没有做这样的声明,则 $fancybox-width
将默认为 400px
。
在选择器范围内导入 sass 局部文件
假设我们新建了一个名为 _blue-theme.scss
文件:
aside {
background: blue;
color: white;
}
然后把它导入到一个 scss 文件的 css 规则内:
.blue-theme {
@import "blue-theme"
}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
原生的 css 导入
由于 sass 兼容原生的 css ,所以它也支持原生的 CSS@import
下列三种情况下会生成原生的 CSS@import
,尽管这会造成浏览器解析 css
时的额外下载:
- 被导入文件的名字以
.css
结尾 - 被导入文件的名字是一个 URL 地址(比如
http://www.sass.hk/css/css.css
),由此可用谷歌字体 API 提供的相应服务 - 被导入文件的名字是
CSS
的url()
值
这就是说,你不能用 sass
的 @import
直接导入一个原始的css
文件,因为sass
会认为你想用css
原生的 @import
。但是,因为 sass
的语法完全兼容 css
,所以你可以把原始的 css
文件改名为 .scss
后缀,即可直接导入了。
标签:blue,文件,变量,sass,color,导入,css 来源: https://www.cnblogs.com/CreateBox/p/15196099.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。