‘AG体育’SCSS和Sass使用这种样式语言所需的所有CSS和SCSS代码

围绕‘AG体育’SCSS和Sass使用这种样式语言所需的所有CSS和SCSS代码，本文从实际体验和常见需求出发重新整理相关内容。}如果要在使用@including 指令时为每个角添加差别的巨细 ，也可以这样做;你只需要指定如下：.box { @include border-radius(15px 10px 5px 0px);}您可以建立自己的mixin库，或者更好的是，您可以使用其中一个社区库。该 @extend 指令被称为Sass最强大的功效之一。

大多数Rails开发人员都知道诸如嵌套，引用选用器，变量，mixin或扩展指令等优点。但萨斯远不止于此！将模块生存在单独的文件中时，这很是有用。

变量我们可以进一步在变量中界说一个元素，并在我们的Sass代码中插入它。}section{background-color: #ded3d4;border:1px solid #ded004;li {display: inline-block;padding: 6px 12px;a {display: block;text-decoration: none;Sass包罗两种类型的扩展名：.scss和.sass。“.scss”文件扩展名完全切合CSS语法，而.sass不完全切合CSS语法，但写入速度更快。

在这篇文章中，我想先容并讨论SCSS的功效。我们来看一下SCSS和Sass，浏览一下所有CSS和SCSS代码，您需要从这种样式语言开始。

&:hover{text-decoration:underline;}}}}}section{background-color: $grey;display:inline-block;width:70%;您甚至可以使用“ &”字符来获取对父选用器的引用。SCSS将很是直观地编译和处置惩罚选择器。

以下示例显示了基本网页的结构：嵌套气势派头以下样式用于建立上面的示例：header{padding:10pxbackground-color: $greytext-align:center;.logo{display:inline-block;@import “fonts”;@import “base”;@import “buttons”;$footer: #AA8439;$primary-color: #403075;$font-stack: Helvetica, sans-serif;}.header {color: $primary-color;}a {color: $primary-color;}使用SCSS嵌套嵌套是SCSS最受接待的功效之一。使用嵌套，您可以在声明的大括号之间添加类。

width:140px;padding: 0;}nav {ul {margin: 0;list-style: none;}import@import 将由Sass处置惩罚，我们所有的CSS和SCSS文件将被编译为一个文件，最终将在我们的实际网站上。您能够建立包罗很少CSS的部门Sass文件，您能够将其包罗在其他Sass文件中，即variable.scss，fonts.scss，buttons.scss等，然后我们能够在main / style中包罗所有SCSS文件.scss文件夹。border-color: red;}.box-yellow {@extend .box;border-color: yellow;让我们从一些安装和使用Sass的基本技巧开始。

使用下令行检察Sass文档以举行安装。有两种方法可以使用应用法式或下令行启动SCSS。

}/ *只需使用'@include'指令来应用mixin * /.box { @include border-radius（15px）;}请注意@mixin 顶部的 指令。使用mixins，您可以制作参数化CSS声明，并在整个样式表中重复使用它们。假设你有一个盒子，你想给盒子圆角：@mixin border-radius（$ round）{-webkit- border-radius：$ round;}header nav ul li a:hover{text-decoration:underline;}header nav ul li a{display: block;}在上面的例子中，我们使用@extend 指令扩展了公共类。

让我们看看我们需要的完整SCSS来获得所需的输出。.box, .box-red, .box-yellow {margin: 1em;@import “layout”;唯一的缺点是为要导入的每个CSS文件触发单独的HTTP请求。text-align:center;}header .logo {display:inline-block;}header nav ul{margin: 0;}header nav ul li{display: inline-block;-moz- border-radius：$ round;-ms- border-radius：$ round;border-radius：$ round;变量的最常见用途是调色板，存储可以在单独的样式表中使用的字体声明，巨细和媒体查询等信息。例如$body: #226666;如果您是SCSS的新手而且您真的没有阅读过许多内容，那么您一定要阅读此博客以获取所有信息。

Sass（Syntactically awesome style sheets）是一种样式表语言，最初由Hampton Catlin设计，由Natalie Weizenbaum开发。Sass是一种预处置惩罚器剧本语言，可以解释或编译成层叠样式表（CSS）。

SassScript自己就是剧本语言。拥抱Sass一次，你可能永远不想再回到vanilla CSS了。

直到最近，当我不得不在一个项目中切换回vanilla CSS时，我才意识到我何等喜欢和Sass一起事情。如果不导入部门文件，则可以使用mixin和variable等可重用组件。假设您已经建立了多个文件，而且需要将它们导入main.scss文件：@import “variables”;padding:5px;.copyright{text-decoration:none;在那段时间里，我学到了许多，所以我决议赞美萨斯，让这个世界变得更优美，让你变得更快乐。如何使用Sass像Sass这样的预处置惩罚器在我们的RoR世界中被广泛使用，使得编写CSS变得越发容易和无杂乱。

}footer .copyright{text-decoration:none;}Mixins和ExtendsMixins和extends是强大的功效，有助于制止大量重复。}footer .copyright:hover{text-decoration:underline;border:1px solid $grey;color: $text-color;}aside{background-color: $grey;color: #555;}aside{background-color: #ded3d4;我们来看看相应的CSS：header{padding:10pxbackground-color: #ded3d4;现在我们现在如何嵌套样式事情。它已被赋予名称 border-radius 并使用变量 $round 作为其参数。

此变量用于设置每个元素的半径值。之后，@include 使用参数值挪用该 指令，即15px。

这是相应的CSS：.box {-webkit- border-radius：15px;-ms- border-radius：15px;-moz- border-radius：15px;border-radius：15px;width:30%;}footer{padding:10px;padding: 1em;border: 2px solid red;}.box-yellow {border-color: yellow;}.box-red {border-color: red;padding: 10px;}现在你想要两个具有相同属性但具有差别边框颜色的类似盒子。border: 2px solid blue;.box-red {@extend .box;此指令允许您将属性从一个选用器共享到另一个选用器。假设你声明一个包罗属性的公共类：.box {margin: 10px;以代码开头的代码 $ 是Sass变量。您可以稍后在样式表中使用这些变量，它们将映射到您界说的值，例如：body {background: $body;font: $font-stack;因此，围绕‘AG体育’SCSS和Sass使用这种样式语言所需的所有CSS和SCSS代码的选择与使用，还需要结合实际情况进行判断。

本文来源：AG体育-www.ag-esportstar.com