在 Visual Studio 中的示例中,启动 SASS

分享于 

24分钟阅读

Web开发

  繁體

介绍

我曾经搜索过很多天,但是我没有找到任何适当的准则,这对我来说是一个初学者。 我认为是CSS的控制语言。 如果你是一个CSS设计师,那么你必须学习 SASS,否则你不能以正确的方式管理 CSS。 在一定时间之后,这将是不可管理的。 这就是我为那些想管理CSS的人写的这篇文章。

背景

首先,你必须下载 Visual Studio 插件的插件。 请从这里下载 SASS插件,这里是 完成安装后,你将重新启动 Visual Studio,并在 Visual Studio 工具栏中看到MINDSCAPE菜单,如下所示:

CSS很难维护,更复杂,更大。 这就是SASS可以帮助你以简单的方式管理CSS的地方。 SASS有一些特性,如变量。嵌套。mixin和继承。 在这里,我将逐步描述。 在使用wince之前,只需创建一个像 below 一样的,文件。 在SASS和SCSS之间,没有括号也没有区别。 这就是为什么我使用SCSS文件来澄清编码。

现在重命名 Scss1.scss to style.scss,并删除该文件的默认内容。 将示例CSS写入这里文件。 下面是一个示例测试示例:

.test {
 color: #f00;}

将文件保存到文件时,这个文件将被编译并生成像这样的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 文件中。 这里,我使用了下划线文件 NAME,这个下划线文件告诉SASS编译器,编译不会生成像 style.scss 这样的CSS文件。 这里文件仅用于导入。 我将告诉你如何导入这篇文章。 下面是 _variables.scss的图形表示。 我还下载了 Twitter Bootstrap 并重命名了文件名 bootstrap.css to _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; }

将&用于链接父元素

下面是嵌套 below 中的& 示例,在这里你使用字符 &,在这里放置在 :hover 之前的li

.navbar-nav>li {
 float: left; &:hover{
 color:red; }}
输出
.navbar-nav>li {
 float: left;}
.navbar-nav>li:hover {
 color: red;}

部分

你可以创建部分类似于 _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";

指南针

请看这里的指南针的细节,这里。

mixin

mixin在SASS中非常重要。 一个mixin用于重用。 下面是 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;}

一些有用的mixin

1.Font-Face:----------------------------------------------------------------------

mixin
// 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:----------------------------------------------------------------------

mixin
// break point@mixin breakpoint($point) {
 @if $point == large {
 @media onlyscreenand (max-width: $screen-large) {
 @content; }
 }@elseif$point == medium {
 @media onlyscreenand (max-width: $screen-Medium) {
 @content; }
 }@elseif$point == small {
 @media onlyscreenand (max-width: $screen-small) {
 @content; }
 }}
使用
// use variables$screen-small: 768px;$screen-Medium: 992px;$screen-large: 1200px;
.sidebar {
 @include breakpoint(medium){
 width: 60%; }}
输出
@mediaonlyscreenand(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;
 }}@mixindisplay ($disp: null, $padding:null, $margin: null) {
 display: $disp;padding: $padding;margin: $margin;}@mixincenter-block {
 display: block;margin-left: auto;margin-right: auto;}// set padding@mixinset-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@mixinset-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@mixingradient-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@mixinhorizontal-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@mixingradient-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 */}@mixintext-shadow ($string: 1px1px1px rgba(200,200,200,0.9)) { 
 text-shadow: $string;}@mixintext-truncate {
 overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}// box shadow@mixinbox-shadow ($string) {
 @include make-property(box-shadow, $string);
}@mixindrop-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);}@mixininner-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);}@mixinbox-sizing ($type: border-box) {
 @include make-property(box-sizing, $type);
}// set border radius@mixinborder-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;}@mixinborder-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; 
}@mixinset-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@mixinset-flexbox () {
 display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex; 
 flex: 1 auto;}// generate default style to link@mixinlink-hover { 
 background-color: $link-background-color;color: $link-hover-color;}@mixinopacity ($opacity: 0.5) {
 -webkit-opacity: $opacity;-moz-opacity: $opacity;opacity: $opacity;}@mixin clearfix() {
 &:before,
 &:after {
 content:"";display: table; }
 &:after {
 clear: both; }}@mixinset-position ($position,$top:auto, $right:auto, $bottom:auto, $left: auto) {
 top: $top;right: $right;bottom: $bottom;left: $left;position: $position;}

4.生成 Icons:----------------------------------------------------------------------

你可以通过传递索引和大小来生成 icon。 在这里,我已经注释了 上面 编码行。 这对你很有帮助,因为在线上,这个方法对你来说是不可用的。

mixin
@mixin icon($index, $size) {
 line-height: 1;vertical-align: middle; &:before {
//Manually define the icon set */
 $columns: 5;// Number of icons going acrossbackground-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; }}

鍑芥暟

函数与mixin不同。 它有返回类型。下面是函数的示例。

鍑芥暟
// 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}

扩展/继承

这是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;}

运算符

+,-,*,/和 % 用于 SASS。 下面是SASS的示例。

.error{
 width: 600px/960px * 100%;}

颜色

SASS中最重要的颜色转换器方法有 DARKENLIGHTENSATURATDESATURATEADJUSTHUE。 下面是示例。

// 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 colorsh1{
 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的初学者很有帮助。 我不擅长英语,如果我有任何错误,请原谅我。 感谢你有耐心。


STA  vis  SASS  Visual Studio  SAS  
相关文章