在 Visual Studio 中启动 SASS 示例
4.73/5 (7投票s)
初次在 Visual Studio 中使用 SASS 会有些困惑，这就是我写这篇文章的原因。我认为它会对所有 SASS 开发者有所帮助。
引言
我花了很长时间搜索，但都没有找到一份像样的指南，在我刚开始学习 SASS 的时候能帮到我。我认为 SASS 是 CSS 的控制语言。如果你是 CSS 设计师，那么你必须学习 SASS，否则你将无法有效地管理 CSS。到一定程度后，CSS 会变得难以管理。所以，我为那些想要管理 CSS 的人写了这篇文章。
背景
首先，你需要下载 Visual Studio 的 SASS 插件。请从 这里 和 这里 下载 SASS 扩展。安装完成后，重新启动 Visual Studio，你将在 Visual Studio 工具栏中看到 MINDSCAPE 菜单，如下所示：
CSS 很难维护，更复杂且庞大。SASS 可以帮助你轻松管理 CSS。SASS 具有变量、嵌套、混合（mixins）和继承等功能。在这里，我将一步一步地介绍。在使用 SASS 之前，只需创建一个 SCSS 文件，如下所示。SASS 和 SCSS 之间除了括号没有区别。因此，我使用 SCSS 文件来阐明代码。
现在，将 *Scss1.scss* 重命名为 *style.scss*，并删除该文件的默认内容。在这个文件中编写示例 CSS。这是一个示例测试：
.test {
color: #f00;
}
当你保存 *style.scss* 文件时，该文件将被编译并生成如下的 CSS 文件。这是你的目标文件。你现在可以将其添加到你的页面中。 这里 是一个在线编译器，你可以在其中测试 SASS 代码。
变量
变量用于存储信息，并可以重复用于颜色、字体堆栈或任何 CSS。SASS 使用 $ 符号来定义变量。这是一个例子：
// variables
$black: #000;
h1{
background-color:$black;
}
输出：你可以在 *style.css* 中看到输出。
h1 {
background-color: black;
}
一些有用的变量
/* ----------------Canvas Variable-------------*/
$audio-canvas-video: false; // True | False
//** Font weights
// -----------------------------
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 400;
$font-weight-regular: 400;
$font-weight-light: 300;
$font-weight-thin: 300;
//** Typography
// -----------------------------
$font-name: 'Segoe UI';
$font-path: '../fonts/segoeui';
$font-family-segoe-ui: $font-name, Arial, sans-serif !default;
$font-style-italic: italic;
$font-smoothing: always;
// Vertical Spacing
$line-height-base: 1.428571429; // 20/14
//** Settings
// -----------------------------
$font-family-base: $font-family-segoe-ui !default;
$font-size-base: 11px;
$font-weight-base: $font-weight-regular;
//** original color
$black: #000 !default;
$white: #fff !default;
$red: #f00 !default;
$light-color :#FFF !default;
$dark-color :#000 !default;
$accent-color :#f00 !default;
//** generate color
$gray-base: $gray !default;
$gray-dark: #5f5f5f !default;
$gray-light: #373a41 !default;
$black-base: $black !default;
$black-dark: darken($black, 80%);
$black-light: lighten($black, 80%);
$white-base: $white !default;
$white-dark: darken($white, 80%);
$white-light: lighten($white, 80%);
$red-base: $red !default;
$red-dark: darken($red, 80%);
$red-light: lighten($red, 80%);
// Typography Colors
// all over link color
$link-font-color: #444444 !default;
$link-color: #d04526 !default;
$link-hover-color: #c03d20 !default;
$link-background-color: $gray-light !default;
$nav-font-color: #444444 !default;
$nav-link-color: #d04526 !default;
$nav-link-hover-color: #c03d20 !default;
$nav-link-background-color: $gray-light !default;
$section-header-font-color: #444444 !default;
$section-header-link-color: #d04526 !default;
$section-header-link-hover-color: #c03d20 !default;
$body-font-color: #555555 !default;
$body-link-color: #d04526 !default;
$body-link-hover-color: #c03d20 !default;
$footer-font-color: #555555 !default;
$footer-link-color: #d04526 !default;
$footer-link-hover-color: #c03d20 !default;
//** Background color
// -----------------------------
$header-bg: $gray-dark !default;
$nav-bg: #adadad !default;
$body-bg: #efeff0 !default;
$footer-bg: $gray-dark !default;
$page-offset: 5px;
/* --->>> Responsive <<<----------*/
/* -----------------------------------*/
$screen-small: 768px;
$screen-Medium: 992px;
$screen-large: 1200px;
$element-height:22px;
注释
SASS 支持使用 /* */ 进行多行 CSS 注释，使用 // 进行单行注释。多行注释会被保留，单行注释会被移除。例如：
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
.test{
color:$black;
}
输出：注释已被移除。
.test{
color:black;
}
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
输出：注释未被移除。
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
是否生成 .CSS 文件
我将所有变量都放在了 *_variables.scss* 文件中。这里我使用了下划线文件名称，这个下划线文件告诉 SASS 编译器它将用于导入，而不是像 *style.scss* 那样生成 CSS 文件。这个文件仅用于导入。我将在稍后的文章中介绍导入。这是 *_variables.scss* 的图示。我还下载了 twitter bootstrap，并将文件名 *bootstrap.css* 重命名为 *_bootstrap.scss*。我将在 SASS 中使用 twitter bootstrap 类。这就是我重命名 bootstrap 文件的原因。当你下载我的示例项目时，你将获得 *_bootstrap.scss* 文件。
嵌套
当你编写 HTML 时，你会发现 HTML 提供了层级结构和清晰的代码，但 CSS 没有。SASS 将提供像 HTML 一样清晰的代码和层级结构。这是一个网站导航的典型样式示例：
footer {
.navbar-inverse {
background: $color_chicago_approx;
}
.navbar-nav {
float: left;
margin: 0;
> li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
.navbar-nav>li {
float: left;
}
}
嵌套输出
footer .navbar-inverse {
background: #5f5f5f;
}
footer .navbar-nav {
float: left;
margin: 0;
}
footer .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
footer .navbar-nav > li {
float: left;
}
使用 & 连接父级元素
这里是嵌套中 & 的示例，当你使用 & 字符时，父级元素会被放置在那里。在这里，li 会被放置在 :hover 之前。
.navbar-nav>li {
float: left;
&:hover{
color:red;
}
}
输出
.navbar-nav > li {
float: left;
}
.navbar-nav > li:hover {
color: red;
}
部分文件 (Partials)
你可以创建部分文件，类似 *_partial.scss*。下划线让 SASS 知道该文件只是一个部分文件，不应生成 CSS 文件。SASS 的部分文件使用 @import 指令。我在 *style.scss* 中使用了两个部分文件。下图所示：
导入
当你在 CSS 中使用 @import 时，CSS 会创建另一个 HTTP 请求。SASS 基于当前的 CSS @import 进行构建，但无需 HTTP 请求。我在这之前导入了两个文件 *_bootstrap.scss* 和 *_variables.scss*。这是 @import 的示例。
@import "variables";
@import "bootstrap";
指南针
请在此处查看 compass 的详细信息：这里。
Mixins
Mixins 在 SASS 中非常重要。Mixins 用于重用。这是一个 border-radius 的例子：
//property generate
@mixin make-property($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
// border radius generate
@mixin border-radius($radius) {
@include make-property(border-radius,$radius);
}
//use
.box { @include border-radius(10px); }
输出
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
一些有用的 Mixins
1. Font-Face:---------------------------------------------------------------------
Mixins
// mixin for bullet proof font declaration syntax
@mixin declare-font-face($font-family, $font-filename,
$font-weight : normal, $font-style :normal, $font-stretch : normal) {
@font-face {
font-family: '#{$font-family}';
//src: url('../fonts/segoeui.ttf') format('truetype'),
url('../fonts/segoeui.woff') format('woff');
src: url('#{$font-filename}.woff') format('woff'),
url('#{$font-filename}.ttf') format('truetype');
font-weight: $font-weight;
font-style: $font-style;
font-stretch: $font-stretch;
}
}
用途
// use variables
$font-name: 'Segoe UI';
$font-path: '../fonts/segoeui';
//use mixins
@include declare-font-face($font-name,$font-path);
输出
@font-face {
font-family: "Segoe UI";
src: url("../fonts/segoeui.woff") format("woff"),
url("../fonts/segoeui.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-stretch: normal;
}
2. Responsive:---------------------------------------------------------------------
Mixins
// break point
@mixin breakpoint($point) {
@if $point == large {
@media only screen and (max-width: $screen-large) {
@content;
}
}
@else if $point == medium {
@media only screen and (max-width: $screen-Medium) {
@content;
}
}
@else if $point == small {
@media only screen and (max-width: $screen-small) {
@content;
}
}
}
用途
// use variables
$screen-small: 768px;
$screen-Medium: 992px;
$screen-large: 1200px;
.sidebar {
@include breakpoint(medium){
width: 60%;
}
}
输出
@media only screen and (max-width: 992px) {
.sidebar {
width: 60%;
}
}
3. 更多 Mixins:---------------------------------------------------------------------
//property generate
@mixin make-property($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
@mixin display ($disp: null, $padding: null, $margin: null) {
display: $disp;
padding: $padding;
margin: $margin;
}
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// set padding
@mixin set-padding ($t-padding: null,$r-padding: null,$b-padding: null ,$l-padding: null) {
padding-top: $t-padding;
padding-right: $r-padding;
padding-buttom: $b-padding;
padding-left: $l-padding;
}
// set margin
@mixin set-margin ($t-margin: null,$r-margin: null,$b-margin: null, $l-margin: null) {
margin-top: $t-margin;
margin-right: $r-margin;
margin-buttom: $b-margin;
margin-left: $l-margin;
}
// background color
@mixin gradient-background ($startColor: $gray-dark, $endColor: $body-bg) {
background-color: $startColor;
background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
background: -webkit-linear-gradient(top, $startColor, $endColor);
background: -moz-linear-gradient(top, $startColor, $endColor);
background: -ms-linear-gradient(top, $startColor, $endColor);
background: -o-linear-gradient(top, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$startColor}',
endColorstr='#{$endColor}', GradientType=0 ); /* IE6-9 */
}
// horizontal gradient background color
@mixin horizontal-gradient-background ($startColor: $gray-dark, $endColor: $body-bg) {
background-color: $startColor;
background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(left, $startColor, $endColor);
background-image: -moz-linear-gradient(left, $startColor, $endColor);
background-image: -ms-linear-gradient(left, $startColor, $endColor);
background-image: -o-linear-gradient(left, $startColor, $endColor);
}
// top to bottom and left to right gradient background color
@mixin gradient-background ($from,$to,$middle:null,$fpecnt:null,$tpecnt:null,$mpecnt:null) {
background: $to; /* Old browsers */
background: -moz-linear-gradient
(top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* FF3.6+ */
background: -webkit-linear-gradient
(top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient
(top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* Opera 11.10+ */
background: -ms-linear-gradient
(top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* IE10+ */
background: linear-gradient
(to bottom, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#{$to}', endColorstr='#{$middle}', GradientType=0 ); /* IE6-9 */
}
@mixin text-shadow ($string: 1px 1px 1px rgba(200,200,200,0.9)) {
text-shadow: $string;
}
@mixin text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// box shadow
@mixin box-shadow ($string) {
@include make-property(box-shadow, $string);
}
@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
-moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
}
@mixin inner-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
-webkit-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
-moz-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
}
@mixin box-sizing ($type: border-box) {
@include make-property(box-sizing, $type);
}
// set border radius
@mixin border-radius ($radius: 4px) {
@include make-property(border-radius, $radius);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
// Single side border-radius
@mixin border-top-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin border-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin border-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin border-radiuses ($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
-webkit-border-top-right-radius: $topright;
-webkit-border-bottom-right-radius: $bottomright;
-webkit-border-bottom-left-radius: $bottomleft;
-webkit-border-top-left-radius: $topleft;
-moz-border-radius-topright: $topright;
-moz-border-radius-bottomright: $bottomright;
-moz-border-radius-bottomleft: $bottomleft;
-moz-border-radius-topleft: $topleft;
border-top-right-radius: $topright;
border-bottom-right-radius: $bottomright;
border-bottom-left-radius: $bottomleft;
border-top-left-radius: $topleft;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
@mixin set-border-radius
($tl-radius: null,$bl-radius: null,$tr-radius: null,$br-radius: null) {
border-top-left-radius: $tl-radius;
border-bottom-left-radius: $bl-radius;
border-top-right-radius: $tr-radius;
border-bottom-right-radius: $br-radius;
}
//set display flexbox
@mixin set-flexbox () {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex: 1 auto;
}
// generate default style to link
@mixin link-hover {
background-color: $link-background-color;
color: $link-hover-color;
}
@mixin opacity ($opacity: 0.5) {
-webkit-opacity: $opacity;
-moz-opacity: $opacity;
opacity: $opacity;
}
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@mixin set-position ($position,$top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: $position;
}
4. 生成图标:---------------------------------------------------------------------
你可以通过传入索引和大小来生成图标。在这里，我注释掉了上面的代码行。这会对你非常有帮助，因为在线上，这种方法对你来说是不可用的。
Mixins
@mixin icon($index, $size) {
line-height: 1;
vertical-align: middle;
&:before {
// Manually define the icon set */
$columns: 5; // Number of icons going across
background-image: url(icons/large/sprite.png);
background-size: $columns * 100%;
// Size icon will be displayed */
width: #{$size}px;
height: #{$size}px;
// Position background-image based on number of icons in sprite */
background-position: #{(100/($columns - 1)*($index - 1))}% 0;
// Set position to inline */
content: "";
margin-right: #{$size/4}px;
display: inline-block;
line-height: #{$size}px;
vertical-align: middle;
}
}
函数
函数与 Mixins 不同。它有返回值。这是一个函数的例子：
函数
// Convert px to em
@function pxtoem($target, $context){
@if $target == 0 { @return 0 }
@return ($target/$context)+0em;
}
用途
//use of variables
$font-size-base: 11px;
//here 14px is my target font-size according to base font-size
.side-bar{
font-size: pxtoem(14px,$font-size-base);
}
输出
.side-bar {
font-size: 1.27273em;
}
一些有用的函数
// Convert px to em
@function pxtoem($target, $context){
@if $target == 0 { @return 0 }
@return ($target/$context)+0em;
}
// Convert em to px
@function emtopx($target, $context){
@if $target == 0 { @return 0 }
@return ($target*$context)+0px;
}
// calculate font size
@function font-size($sizeValue: $font-size-base) {
@return ($sizeValue / $font-size-base) * 100%;
}
// calculate line height
@function line-height($heightValue: $line-height-base ){
@return $heightValue;//write your own code
}
// calculate form element height
@function element-height($heightValue: $element-height ){
@return $heightValue;//write your own code
}
Extend/Inheritance (扩展/继承)
这是 SASS 最有用的功能之一。使用 @extend 将一组 CSS 属性从一个选择器共享到另一个选择器。这是一个简单的例子：
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
输出
.message, .success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
运算符
+, -, *, /, and % 用于 SASS。这是一个 SASS 的例子：
.error{
width: 600px / 960px * 100%;
}
颜色
SASS 中有非常重要的颜色转换方法，如 DARKEN（变暗）、LIGHTEN（变亮）、SATURAT（饱和）、DESATURATE（去饱和）、ADJUST（调整）、HUE（色相）。这是一个例子：
// variables
$red: #ff0000;
$red-dark: darken($red,10%);
$red-light: lighten($red,20%);
$red-desaturate: desaturate($red, 28);
$red-hue: adjust_hue(desaturate($red, 28), 189);
// use of colors
h1{
background-color:$red;
}
h2{
background-color:$red-light;
}
h3{
background-color:$red-dark;
}
h4{
background-color:$red-desaturate;
}
h5{
background-color:$red-hue;
}
输出
h1 {
background-color: #ff0000;
}
h2 {
background-color: #ff6666;
}
h3 {
background-color: #cc0000;
}
h4 {
background-color: #db2424;
}
h5 {
background-color: #24c0db;
}
有一个非常好的在线颜色转换工具。你可以从 这里 使用。
不熟悉 SASS
如果你不熟悉 SASS，可以使用在线工具来创建 SASS。你只需要编写 CSS 代码，该工具就会将其转换为 SASS 代码。这个工具是为初学者准备的。如果你是专家，就没有必要编写 CSS 代码。它仅用于 SASS 代码练习，适用于以前从未使用过 SASS 的初学者。
结论
我认为这篇文章对想要学习 SASS 的初学者会非常有帮助。我的英语不好，如果有什么错误，请原谅我。感谢你的耐心。