在本章中，我们将研究CSS扩展。CSS扩展可以用来增强网页的功能。下表列出了SASS中使用的一些CSS扩展。
嵌套规则
这是一种将多个CSS规则相互组合的方法。
描述
嵌套是不同逻辑结构的组合。使用SASS，我们可以相互组合多个CSS规则。如果使用多个选择器，则可以在另一个内部使用一个选择器来创建复合选择器。
例
以下示例描述了SCSS文件中嵌套规则的用法。
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h1>My First Heading</h1>
<p>It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
<p>It is more stable and powerful CSS extension language.</p>
<div class = "box">
<h1>My Second Heading</h1>
<p>It is initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
</div>
</div>
</body>
</html>接下来，创建文件style.scss。请注意.scss扩展名。
style.scss
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.box{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行上述命令，它将使用以下代码自动创建style.css文件-
生成的style.css如下所示-
style.css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .box h1 {
font-size: 25px;
color: #E45456;
}
.container .box p {
font-size: 25px;
color: #3C7949;
}输出
让我们执行以下步骤，看看上面给出的代码如何工作-
- 将上述给定的html代码保存在nested_rules.html文件中。
引用父选择器
您可以使用＆字符选择父选择器。它告诉应该在何处插入父选择器。以下示例描述了SCSS文件中父选择器的用法：
<html>
<head>
<title>Referencing Parent Selectors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h1>Example using Parent Selector</h1>
<a href = "http://www.tutorialspoint.com/"> www.tutorialspoint.com </a>
</div>
</body>
</html>接下来，创建文件style.scss。请注意＆字符的使用，它指定应将父选择器插入到何处。
style.scss
a {
font-size: 20px;
&:hover { background-color: yellow; }
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件-
style.css
a {
font-size: 20px;
}
a:hover {
background-color: yellow;
}输出
让我们执行以下步骤，看看上面给出的代码如何工作-
- 将上述给定的html代码保存在parent_selectors.html文件中。
- 在浏览器中打开此HTML文件，如下所示显示输出。
- 这里＆将被父选择器a代替。当您将鼠标悬停在链接上时，它将显示为黄色的背景颜色。
嵌套属性
使用嵌套属性，可以避免多次重写CSS。例如，使用font作为名称空间，它使用一些属性，例如font-family，font-size，font-weight和font-variant。在普通CSS中，您每次都需要使用名称空间编写这些属性。使用SASS，可以通过只编写一次名称空间来嵌套属性。
以下示例描述了SCSS文件中嵌套属性的使用：
<html>
<head>
<title>Nested Properties</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h1>Example using Nested Properties</h1>
<p class = "line">SASS stands for Syntactically Awesome Stylesheet</p>
</div>
</body>
</html>接下来，创建文件style.scss。
style.scss
.line {
font: {
family: Lucida Sans Unicode;
size:20px;
weight: bold;
variant: small-caps;
}
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件-
style.css
.line {
font-family: Lucida Sans Unicode;
font-size: 20px;
font-weight: bold;
font-variant: small-caps;
}输出
让我们执行以下步骤，看看上面给出的代码如何工作-
- 将上述给定的html代码保存在nested_properties.html文件中。
占位符选择器
SASS支持使用类或ID选择器的占位符选择器。在普通CSS中，这些用“ ＃ ”或“ 。 ”指定，但在SASS中，它们用“ ％ ”代替。要使用占位符选择器，可以将它们与@extend指令一起使用。如果不使用@extend指令，则无法在CSS中显示结果。以下示例演示了SCSS文件中占位符选择器的使用。
<html>
<head>
<title>Placeholder Selectors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>First Heading</h1>
<p class = "frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
<h1>Second Heading</h1>
<p class = "sec_para">It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
</body>
</html>接下来，创建文件style.scss。
style.scss
.frst_para {
color: green;
}
.sec_para {
@extend .frst_para;
font-size:20px;
}在这里，我们使用了@extend指令，该指令允许一个选择器继承另一个选择器的样式。您可以使用以下命令，让SASS监视文件并在Sass文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件-
style.css
.frst_para, .sec_para {
color: green;
}
.sec_para {
font-size: 20px;
}输出
让我们执行以下步骤，看看上面给出的代码如何工作-
- 将上述给定的html代码保存在placeholder_selectors.html文件中。
作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1733.html
