投稿
  1. Web176教程首页
  2. Sass教程

Sass：CSS扩展

terry • • Sass教程 • 阅读 322

在本章中，我们将研究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
Sass：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

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2021年2月1日 下午7:07
下一篇 2021年2月4日 下午3:06

相关推荐

发表回复

登录后才能评论