sass导入sass
一点历史 (A bit of history)
SASS appeared in 2006 and stands for Syntactically Awesome Stylesheet and have evolved a lot since then.
SASS出现在2006年，从那时起代表对于s yntactically 一个 wesome 小号 tyle 小号 HEET并已经发展了很多。
The main point that can cause some confusion is the difference between SASS and SCSS. SASS is the tool name that supports two syntaxes:
可能引起混淆的要点是SASS和SCSS之间的区别。 SASS是支持两种语法的工具名称：
- SassScript (also known as "the intended syntax") that has an indented format much like Haml. The main problem here is that you cannot reuse your existing CSS. 具有类似Haml的缩进格式的SassScript （也称为“预期语法”）。 这里的主要问题是您不能重用现有CSS。
- SCSS (Sassy CSS) came later, and pretty much replaced the SassScript, with a syntax that is CSS on steroids. This means that you can just drop normal CSS in a SCSS file and start optimizing from there. SCSS （Sassy CSS）后来出现了，并且用类固醇上CSS语法几乎替代了SassScript。 这意味着您可以将普通CSS放到SCSS文件中，然后从那里开始进行优化。
()
Before we start
This article doesn't cover all the functionalities provided by SASS. My idea is to show that SASS serves a much broader purpose than the mere nested selectors feature for which it's most known. Please make sure you take your time to ready the complete documentation available开始之前
本文未涵盖SASS提供的所有功能。 我的想法是证明SASS的作用远比最著名的单纯的嵌套选择器功能广泛。 请确保您花时间准备 here. 此处的完整文档。浏览器只知道CSS (Browsers only know CSS)
这是非常重要的一点。 浏览器对SASS一无所知。 他们只能读取CSS语法。 这意味着需要使用您选择的编译器将SASS编译为普通CSS。 最佳选择取决于您的开发环境。If you're using Visual Studio, your best option is Visual Studio Web Essentials. Among many other features, it seamlessly integrates with the IDE and generates your CSS files on the fly.
如果您使用的是Visual Studio，则最好的选择是Visual Studio Web Essentials 。 它具有许多其他功能，可以与IDE无缝集成，并可以即时生成CSS文件。
Other compilers are available for virtually any platform; just make sure you include the compilation process at file-save time or, at the very least, at build time.
其他编译器几乎可用于任何平台。 只需确保在文件保存时或至少在构建时包括编译过程即可。
通过示例学习SASS (Learning SASS by example)
在逐步构建精美的网格菜单时，我将向您展示SCSS的主要功能。 我建议您随时进行测试。 为了避免设置麻烦，建议您使用许多在线SCSS在线测试工具之一，例如 SassMeister of jsFiddle的 jsFiddle. SassMeister 。What I propose we do is a configurable matrix of links, rotated by 45 degrees. The end result should look like this:
我建议我们要做的是将链接配置为可旋转45度的矩阵。 最终结果应如下所示：
The base HTML is the following:
基本HTML如下：
<ul class="fancygrid">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
<li><a>Item 5</a></li>
<li><a>Item 6</a></li>
</ul>
1. SASS只是CSS (1. SASS is just CSS)
如前所述，它只是类固醇上CSS。 这意味着您当前所有CSS代码将被100％重用。()
2. Nested selectors
This is probably one of the most known SASS features. What this means is that you can start nesting your selectors instead of duplicating the parent all over the place. Below you'll see that the SASS representation defines the inner <li> styles nested in the <ul> definition.2.嵌套选择器
这可能是最著名的SASS功能之一。 这意味着您可以开始嵌套选择器，而不必在整个位置复制父级。 在下面，您将看到SASS表示形式定义了嵌套在<ul>定义中的内部<li>样式。SASS
萨斯
.fancygrid {
position: relative;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
li {
display: block;
float: left;
margin: 0;
padding: 0;
border: solid 1px #f00;
width: 50px;
height: 50px;
}
}
The CSS result of the above
上面CSS结果
.fancygrid {
position: relative;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
}
.fancygrid li {
display: block;
float: left;
margin: 0;
padding: 0;
border: solid 1px #f00;
width: 50px;
height: 50px;
}
()
3. Variables
Let's start with the fun stuff, Variables! Variables names must start with $ and their value can be anything that is a valid CSS property value (more on this later).3.变量
让我们从有趣的东西开始吧！ 变量名称必须以$开头，并且其值可以是有效CSS属性值的任何值（稍后会详细介绍）。How many times do you repeat colors and sizes across your styles? How painful is it when the client want a different shade of yellow and you have to change it everywhere? Forget about all that and store these common values variables. Let's refactor our simple code to include them.
您在样式中重复多少次颜色和大小？ 如果客户想要不同的黄色阴影，而您又不得不在任何地方进行更改，那会有多痛苦？ 忘记所有这些并存储这些公共值变量。 让我们重构我们的简单代码以包含它们。
.fancygrid {
$width: 50px;
$height: 50px;
$hmargin: 10px;
$vmargin: 10px;
position: relative;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
li {
display: block;
float: left;
margin: 0 $hmargin $vmargin 0;
padding: 0;
border: solid 1px #f00;
width: $width;
height: $height;
}
}
()
4. Mixins
What if we could encapsulate some CSS logic in function-like blocks of code? This is what Mixins are for. Basically, you define a function, that can accept arguments, and the result will be the properties that will be added to the selector where you are using it. A good example is a function that applies rounded corners to an element:4. Mixins
如果我们可以将某些CSS逻辑封装在类似函数的代码块中怎么办？ 这就是Mixins的用途。 基本上，您定义一个可以接受参数的函数，结果将是将添加到使用它的选择器中的属性。 一个很好的例子是将圆角应用于元素的函数：@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Another example is a mixin that rotates elements by a specified value:
另一个例子是一个mixin，它将元素旋转指定的值：
@mixin rotate($degrees) {
-ms-transform: rotate($degrees);
/* IE 9 */
-webkit-transform: rotate($degrees);
/* Chrome, Safari, Opera */
transform: rotate($degrees);
}
Let's add these Mixins to our code:
让我们将这些Mixins添加到我们的代码中：
()
.fancygrid {
$width: 50px;
$height: 50px;
$radius: 5px;
$rotate: 45deg;
$hmargin: 10px;
$vmargin: 10px;
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin rotate($degrees) {
-ms-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
transform: rotate($degrees);
}
position: relative;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
li {
display: block;
float: left;
margin: 0 $hmargin $vmargin 0;
padding: 0;
border: solid 1px #f00;
width: $width;
height: $height;
@include border-radius($radius);
@include rotate($rotate);
}
}
()
5. You can do Math!
This one is also very handy. With SCSS you can calculate the value of your properties instead of being forced to set only static values. You can do pretty much any mathematical basic operation, and this is enough for it to get quite complex :) You can also combine variables in your math so that the result depends on them.5.你可以做数学！
这个也很方便。 使用SCSS，您可以计算属性的值，而不必强行仅设置静态值。 您几乎可以执行任何数学基本操作，这足以使其变得相当复杂:)您还可以在数学中合并变量，以便结果取决于变量。Something like:
就像是：
width: $width * 2;
I'm not anything to our example just now, move on!
我现在对我们的示例来说还算什么，继续前进！
6.循环 (
6. Loops)
是的，我们还可以在SCSS中进行循环，它们非常方便。 循环可以通过三种方式定义：
@for,
@for ，
@each or
@each或
@while.
@while 。
Their names a very much self-explanatory and they can be used as follows:
它们的名字非常不言而喻，可以按如下方式使用：
/* @for */
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
/* @each */
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/* @while */
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Let's now revamp our demo and take advantage of the math and loops.
现在，让我们修改演示并利用数学和循环。
The final HTML
最终HTML
<ul class="fancygrid">
<li class="pos-0-0">
<a href="#1"><span>Item 1</span></a>
</li>
<li class="pos-0-1">
<a href="#1"><span>Item 2</span></a>
</li>
<li class="pos-0-2">
<a href="#1"><span>Item 3</span></a>
</li>
<li class="pos-1-0">
<a href="#1"><span>Item 4</span></a>
</li>
<li class="pos-1-1">
<a href="#1"><span>Item 5</span></a>
</li>
<li class="pos-1-2">
<a href="#1"><span>Item 6</span></a>
</li>
</ul>
The final SCSS
最终的SCSS
.fancygrid {
$textColor: #000;
$width: 50px; // item width
$height: 50px; // item height
$radius: 5px; // corner rounding radius
$rotate: 45deg; // item rotation
$hmargin: 25px; // horizontal margin
$vmargin: 25px; // vertical margin
$top: 0; // initial top position
$left: 0; // initial left position
$rows: 2; // number or rows
$cols: 3; // number of columns
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin rotate($degrees) {
-ms-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin position($row, $col) {
left: $left + $width/2 + $width*$col + $hmargin*$col;
top: $top + $height/2 + $height*$row + $vmargin*$row;
}
position: relative;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
li {
display: block;
position: absolute;
margin: 0 $hmargin $vmargin 0;
padding: 0;
border: solid 1px #f00;
width: $width;
height: $height;
@include border-radius($radius);
@include rotate($rotate);
/* generate the classes dynamically for all
the available positions. This directly
depends on the $cols and $rows variables
declared above. If you want more rows or columns
just configure it accordingly. */
@for $r from 0 through $rows {
@for $c from 0 through $cols {
&.pos-#{$r}-#{$c} {
@include position($r, $c);
}
}
}
a {
display: block;
text-decoration: none;
display: table-cell;
height: $height;
width: $width;
text-align: center;
vertical-align: middle;
color: $textColor;
span {
display: block;
// rotate the text back the same value
@include rotate(-$rotate);
}
}
}
}
还有很多要知道的 (There's a lot more to know)
我的目的不是要复制SASS文档，而是要证明SASS不仅仅是嵌套选择器。At the end, you can build full CSS frameworks with this that you can reuse across all your projects. Please refer to the documentation to fully know the language.
最后，您可以以此构建完整CSS框架，从而可以在所有项目中重复使用。 请参阅文档以完全了解该语言 。
()
Honorable mentions:
荣誉奖：
@如果 (@if)
不难想象，您最终将需要某种条件。@进口 (@import)
允许您引用多个SCSS文件，从而使您可以更好地组织代码并仅选择真正需要的部分。
@延伸 (
@Extend)
选择器的继承。 想象一下，您需要创建一个与选择器完全一样的新选择器，但是您需要添加或更改几个属性。 您可以简单地从现有继承（扩展）并从那里开始。
()
The End
I hope I managed to, at least, pique your curiosity. For simple styles the advantage is not evident but when things start getting complex you'll see that treating your CSS in a "OOP" way makes the whole thing much easier to maintain.结束
我希望至少能够激起您的好奇心。 对于简单的样式，优点并不明显，但是当事情开始变得复杂时，您会发现以“ OOP”方式处理CSS使整个事情变得更容易维护。翻译自: https://www.experts-exchange.com/articles/23679/The-power-of-SASS.html
sass导入sass
扫一扫
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
