Sass와 Compass를 만나다 - Sass 장
- WBOY원래의
- 2016-10-15 10:32:01855검색
백엔드에서 프론트엔드로 전환하는 웹 개발자에게 가장 큰 고민은 CSS를 작성하는 것입니다. CSS를 아는 사람이라면 누구나 웹 페이지 스타일을 개발할 수 있다는 것을 알지만 프로그래밍에는 사용할 수 없다는 느낌이 듭니다. . 향후 유지 관리를 용이하게 하려면 CSS 문장의 상당 부분만 문장별로 수정하거나 다시 작성할 수도 있습니다. 백엔드 인력이 프론트엔드 산업으로 유입되면서 CSS는 새로운 생명력을 얻게 되었습니다. 사람들은 CSS에 프로그래밍 요소, 즉 "CSS 전처리기"를 추가하기 시작했습니다. 기본 아이디어는 특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 이를 일반 CSS 파일로 컴파일하는 것입니다. 아래에서는 공식 문서와 Ruan Yifeng 선생님의 사용 가이드를 결합하여 Sass의 주요 사용법을 체계적으로 요약했습니다.
1.Sass 설치
Sass는 Ruby 언어로 작성되었습니다. Sass를 설치하기 전에 먼저 Ruby를 설치해야 합니다. Ruby 설치 과정은 자세히 설명하지 않습니다. )
<code>gem install sass </code>
2.Sass 활용
Sass 파일은 .sass와 .scss라는 두 개의 접미사가 붙은 일반 텍스트 파일입니다. 접미사 .sass가 있는 파일의 인코딩 스타일에는 중괄호 추가가 필요하지 않지만 다음과 같이 들여쓰기 및 기타 작업을 처리해야 합니다.
<code>*
margin:0;
padding:0;
</code>
접미사가 .scss인 파일의 인코딩 스타일은 다음과 같이 일반 CSS 스타일로 편향되어 있습니다.
<code>*{
margin:0;
padding:0;
}
</code>
Sass는 두 스타일을 동시에 공식적으로 업데이트할 예정이므로 어떤 스타일을 선호하는지는 개인 취향에 따라 다릅니다. 저는 .scss 파일 접미사를 선호하므로 다음 예에서는 .scss 파일 스타일을 기반으로 합니다.
다음 명령은 .scss 파일에서 변환된 CSS를 화면에 표시할 수 있습니다(파일 이름이 test라고 가정)
<code>sass test.scss </code>
.scss 파일을 바로 CSS 파일로 변환하려면, 뒤에 .css 파일 이름을 붙여야 합니다
<code>sass test.scss test.css </code>
Sass는 네 가지 컴파일 스타일 옵션을 제공합니다
<code>* nested: 嵌套缩进的css的代码，默认 * expanded：没有缩进、扩展的css代码 * compact：简介格式的css代码 * compressed：压缩后的css代码 </code>
다음 명령을 사용하여 컴파일 스타일을 전환할 수 있습니다
<code>sass --style compressed test.scss test.css </code>
또한 Sass가 특정 파일이나 디렉토리를 모니터링하도록 할 수 있으며 소스 파일이 변경되면 자동으로 컴파일된 버전이 생성됩니다
<code>// watch a file sass --watch test.scss:test.css // watch a direcoty sass --watch app/sass:public/stylesheets </code>
webStrom을 사용하여 개발하는 학생이 있다면 파일 감시자를 추가할 수 있지만 전체 디렉터리를 켜서 모니터링하는 것만큼 좋지는 않다고 생각합니다. 한 가지 주목할 점은 서로 다른 배치 프로세스가 서로 다른 파일 접미사에 해당한다는 것입니다. , 즉, sass.bat는 .sass 파일에 해당하고, scss.bat는 .scss 파일에 해당합니다.
3.Sass의 기본 사용법
3.1 가져오기
Sass의 가져오기(@import) 규칙은 CSS의 규칙과 다릅니다. CSS @import 가져오기의 단점을 검토해 보겠습니다. CSS @import가 파일을 가져오면 즉시 가져오지 않고 이후에만 가져옵니다. CSS 파일을 다운로드하고 구문 분석한 후 브라우저는 다운로드해야 할 다른 CSS가 있음을 인식하고 다운로드한 후 구문 분석 및 빌드와 같은 일련의 작업을 시작합니다. 렌더링 트리가 발생하여 CSS를 병렬로 다운로드할 수 없게 됩니다 . 그러나 Sass를 임포트(@import)하면 @import의 scss 파일은 컴파일 중에 하나의 CSS 파일로만 병합됩니다. 하지만 @import 'reset.css'와 같은 CSS 파일을 sass 파일로 가져오면 일반 CSS 가져오기 스타일 파일과 효과는 동일하지만 가져온 CSS 파일은 컴파일된 파일에 병합되지 않고 존재하게 됩니다. @import 모드에서.
모든 Sass 가져오기 파일은 접미사 .scss를 무시할 수 있습니다. 일반적으로 기본적인 파일 명명 방식은 mixin.scss와 같이 로 시작됩니다. 이런 종류의 파일은 가져올 때 밑줄을 그을 필요가 없지만 @import "mixin"으로 쓸 수 있습니다.
가져온 sass 파일 a.scss:
<code>//a.scss
//-------------------------------
body {
background: #eee;
}
</code>
스타일을 가져와야 하는 sass 파일 b.scss:
<code>@import "reset.css";
@import "a";
p{
background: #0982c1;
}
</code>
번역된 b.css 스타일:
<code>@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
</code>
위 코드에서 볼 수 있듯이, b.scss가 컴파일된 후에도 Reset.css는 계속해서 임포트되고, a.scss는 통합됩니다.
3.2 참고사항
Sass에는 두 가지 주석 방법이 있습니다. 하나는 표준 CSS 주석 방법 /* */이고, 다른 하나는 // 이중 슬래시 형식의 한 줄 주석이지만 이 한 줄 주석은 번역되지 않습니다. 표준 CSS 주석
<code>/*
*我是css的标准注释
*设置body内距
*/
body{
padding:5px;
}
</code>
이중 슬래시 한 줄 주석 한 줄 주석은 JavaScript 언어의 주석과 동일하며 슬래시(//)를 사용하지만 CSS에는 한 줄 주석이 입력되지 않습니다.
<code>//我是双斜杠表示的单行注释
//设置body内距
body{
padding:5px; //5px
}
</code>
3.3 변수
Sass 변수는 $로 시작하고 그 뒤에 변수 이름이 와야 하며, 변수 값과 변수 이름은 콜론(:)으로 구분해야 합니다(CSS 속성 설정과 마찬가지로). 값 뒤에는 ! 기본값.
3.3.1 일반변수
정의 후에는 전역적으로 사용할 수 있습니다.
<code>//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
</code>
3.3.2 기본 변수
Sass의 기본 변수는 값 뒤에 !default만 추가하면 됩니다.
<code>//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
</code>
Sass의 기본 변수는 일반적으로 기본값을 설정한 후 필요에 따라 재정의하는 데 사용됩니다. 덮어쓰기 방법도 매우 간단합니다. 기본 변수 전에 변수를 다시 선언하면 됩니다
<code>//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
</code>
컴파일된 line-height가 이제 기본 1.5가 아닌 2임을 알 수 있습니다. 기본 변수의 값은 구성 요소 개발을 수행할 때 매우 유용할 수 있습니다.
3.3.3 특수변수
일반적으로 우리가 정의하는 변수는 속성 값이므로 직접 사용할 수 있지만, 해당 변수를 속성으로 사용하거나 특별한 상황에서는 #{$variables} 형식으로 사용해야 합니다.
<code>//sass style
//-------------------------------
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}
</code>
3.3.4 다중값 변수
다중값 변수는 리스트 타입과 맵 타입으로 구분됩니다. 간단히 말하면 리스트 타입은 js의 배열과 비슷하고, 맵 타입은 js의 객체와 약간 비슷합니다.
3.3.4.1 list
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可） 定义
<code>//一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); </code>
使用
<code>//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
</code>
3.3.4.2 map
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可） 定义
<code>$heading: (h1: 2em, h2: 1.5em, h3: 1.2em); </code>
使用
<code>//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
</code>
3.4 嵌套(Nesting)
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
3.4.1 选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。 在选择器嵌套中，可以使用&表示父元素选择器
<code>//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
</code>
3.4.2 属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：
<code>//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
</code>
3.5 混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
3.5.1 无参数mixin
<code>//sass style
//-------------------------------
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
margin-right:auto;
}
</code>
3.5.2 有参数mixin
<code>//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
</code>
3.5.3 多个参数mixin
调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。
<code>//sass style
//-------------------------------
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
//css style
//-------------------------------
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
</code>
3.5.4 多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。
<code>//sass style
//-------------------------------
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
//-------------------------------
.box{
border:1px solid #ccc;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}
</code>
3.5.5 @content
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。
<code>//sass style
//-------------------------------
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
body { color: red }
}
</code>
3.6 继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。
3.6.1 普通继承
<code>//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
</code>
3.6.2 占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
<code>//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}
</code>
如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。
3.7 函数
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
<code>//sass style
//-------------------------------
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
//-------------------------------
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}
</code>
3.8 运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
<code>$baseFontSize: 14px !default; $baseLineHeight: 1.5 !default; $baseGap: $baseFontSize * $baseLineHeight !default; $halfBaseGap: $baseGap / 2 !default; $samllFontSize: $baseFontSize - 2px !default; //grid $_columns: 12 !default; // Total number of columns $_column-width: 60px !default; // Width of a single column $_gutter: 20px !default; // Width of the gutter $_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width </code>
3.9 条件判断及循环
3.9.1 @if判断
@if可一个条件单独使用，也可以和@else结合多条件使用
<code>//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
</code>
3.9.2 三目判断
语法为：if($condition, $iftrue, $iffalse) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
<code>if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px </code>
3.9.3for循环
for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
<code>//sass style
//-------------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
</code>
3.9.4 @each循环
语法为：@each $var in 。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
3.9.4.1 单个字段list数据循环
<code>//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
</code>
3.9.4.2 多个字段list数据循环
<code>//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
</code>
3.9.4.3多个字段map数据循环
<code>//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
</code>
（完）