百科狗属性声明 - scss 样式
属性声明
在 Sass 中和在 CSS 中一样，属性声明定义了匹配选择器的元素的样式。但 Sass 添加了额外的功能，使它们更易于编写和自动化。首先，声明的值可以是任何 SassScript 表达式，它将被计算并包含在结果中。
| scss 语法 | css 语法 |
|---|---|
.circle {
$size: 100px;
width: $size;
height: $size;
border-radius: $size * 0.5;
}
| .circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
|
插值
属性的名称可以包含插值，这使得可以根据需要动态生成属性。您甚至可以插入整个属性名称！
| scss 语法 | css 语法 |
|---|---|
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: $value;
} #{$property}: $value;
}
.gray {
@include prefix(filter, grayscale(50%), moz webkit);
}
| .gray {
-moz-filter: grayscale(50%);
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
|
嵌套
许多 CSS 属性都以作为一种命名空间的相同前缀开头。例如，font-family，font-size，font-weight，并且都以font-开头。Sass 通过允许嵌套属性声明，使这变得更容易且更少冗余。外部属性名称被添加到内部，用连字符分隔。
| scss 语法 | css 语法 |
|---|---|
.enlarge {
font-size: 14px;
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
&:hover { font-size: 36px; }
}
| .enlarge {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
.enlarge:hover {
font-size: 36px;
}
|
隐藏声明
有时您只希望在某些时候出现属性声明。如果一个声明的值是 null 或一个空的未加引号的字符串，Sass 根本不会将该声明编译成 CSS。
| scss 语法 | css 语法 |
|---|---|
$rounded-corners: false;
.button {
border: 1px solid black;
border-radius: if($rounded-corners, 5px, null);
}
| .button {
border: 1px solid black;
}
|
自定义属性
CSS 自定义属性，也称为 CSS 变量，具有不寻常的声明语法：它们允许在其声明值中包含几乎任何文本。更重要的是，这些值可供 JavaScript 访问，因此任何值都可能与用户相关。这包括通常会被解析为 SassScript 的值。
因此，Sass 对自定义属性声明的解析不同于其他属性声明。所有标记，包括那些看起来像 SassScript 的标记，都按原样传递给 CSS。唯一的例外是插值，这是将动态值注入自定义属性的唯一方法。
| scss 语法 | css 语法 |
|---|---|
$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;
:root {
--primary: #{$primary};
--accent: #{$accent};
--warn: #{$warn};
// Even though this looks like a Sass variable, it's valid CSS so it's not evaluated.
--consumed-by-js: $primary;
}
| :root {
--primary: #81899b;
--accent: #302e24;
--warn: #dfa612;
--consumed-by-js: $primary;
}
|
不幸的是，插值会从字符串中删除引号，这使得当它们来自 Sass 变量时，很难将带引号的字符串用作自定义属性的值。作为一种解决方法，您可以使用该meta.inspect()函数来保留引号。
| scss 语法 | css 语法 |
|---|---|
@use "sass:meta";
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
:root {
--font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
--font-family-monospace: #{meta.inspect($font-family-monospace)};
}
| :root {
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}
|
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
