SASS 학습 요약

머리말

SASS는 CSS 전처리기입니다. 기본 아이디어는 전문적인 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 이를 일반 CSS 파일로 컴파일하는 것입니다.

SASS는 네 가지 컴파일 스타일 옵션을 제공합니다.

• nested: 중첩된 들여쓰기 CSS 코드(기본값).

• expanded: 들여쓰기되지 않은 확장된 CSS 코드입니다.

• compact: 간결한 형식의 CSS 코드입니다.

• 압축: 압축된 CSS 코드입니다.

파일 가져오기

@import 명령, 외부 파일을 가져오는 데 사용됩니다.

　@import "path/filename.scss";

.css 파일을 가져오는 경우 css 가져오기 명령과 동일합니다.

댓글

Sass에는 두 가지 주석 방법이 있습니다. 하나는 표준 CSS 주석 방법 /* */이고 다른 하나는 //이중 슬래시 형식의 한 줄 주석입니다. , 그러나 이러한 한 줄 주석은 번역되지 않습니다.

1 변수

SASS에서는 변수 사용을 허용하며 모든 변수는 $

으로 시작합니다.

일반 변수

는 다음에서 정의할 수 있습니다. 전역 범위 내부용입니다.

기본 변수

sass의 기본 변수는 값 뒤에 !default만 추가하면 됩니다.

Sass의 기본 변수는 일반적으로 기본값을 설정한 후 필요에 따라 재정의하는 데 사용됩니다. 덮어쓰기 방법도 매우 간단합니다. 기본 변수 전에 변수를 다시 선언하면 됩니다.

기본 변수의 값은 컴포넌트 개발 시 매우 유용할 수 있습니다.

특수 변수

일반적으로 우리가 정의하는 변수는 속성값으로 직접 사용할 수 있지만 변수를 속성으로 사용하거나 일부 특수한 상황에서는 # 사용할 {$variables} 형식입니다.

다중값 변수

다중값 변수는 리스트형과

맵형으로 구분됩니다. 간단히 말하면 리스트형은 과 약간 비슷합니다. js>배열, 맵 유형은 js의 객체

전역 변수

다음에 !global을 추가하는 것과 약간 비슷합니다. 변수 값이 전역 변수가 됩니다. 아직 사용할 수는 없지만 Sass 3.4 이후 버전에서 공식적으로 사용될 예정입니다. 현재 sass 변수 범위 가 비판을 받아 이 전역 변수가 생성되었습니다.

2 중첩

Sass에는 두 가지 중첩 유형이 있습니다. 하나는 선택자의 중첩이고, 다른 하나는 속성의 중첩입니다. 우리가 일반적으로 이야기하거나 사용하는 것은 선택자의 중첩입니다.

선택기 중첩에서는 &를 사용하여 상위 요소 선택기

속성 중첩: 소위 속성 중첩은 일부 속성이 동일한 시작 단어를 가짐을 의미합니다. border-width 및 border-color 등은 모두 테두리로 시작합니다.

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

@at-root: sass3.3.0의 새로운 기능, 선택기 중첩을 중단하는 데 사용됩니다.

3 Mixin

sass에서 @mixin을 사용하여 매개변수를 전달할 수 있습니다. 매개변수 이름은 $ 기호로 시작합니다. 기본값을 설정할 수도 있습니다. 매개변수 값. 선언된 @mixin은 @include를 통해

여러 매개변수를 호출합니다. mixin

을 호출할 때 전달되는 매개변수의 개수를 직접 전달할 수 있습니다. by @include is less than @ 믹스인에서 정의한 매개변수의 개수를 순서대로 표현하며, 나중에 매개변수가 부족하고 기본값이 없으면 오류가 발생합니다. 보고되었습니다. 또한 매개변수 이름과 값을 동시에 전달하여 선택적으로 매개변수를 전달할 수도 있습니다.

다중 값 매개변수 혼합

매개변수에 상자 그림자, 전환 등과 같은 여러 값 세트가 있을 수 있는 경우 매개변수는 매개변수 뒤에 점 3개를 추가하여 표시해야 합니다. $variables와 같은 변수 ....

@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

 //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 }
}

** @mixin @include를 호출한 후 파싱한 스타일은 복사 형태로 존재하는 반면, 다음 상속된은 공동선언 형태로 존재하므로 3.2 버전 .0부터는 , 매개변수를 전달하려면 @mixin을 사용하는 것이 좋지만 매개변수 클래스를 전달하는 대신 다음 상속%을 사용하는 것이 좋습니다. **

4 상속

Sass에서 선택자 상속을 사용하면 선택자가 다른 선택자의 모든 스타일을 상속하고 공동으로 선언할 수 있습니다. 선택기 상속을 사용하려면 @extend 키워드를 사용하고 그 뒤에 상속할 선택기를 사용하세요.

자리표시자 선택기%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过 @extend 调用。

占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

//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;
}

在 @media 中暂时不能 @extend @media外的代码片段，以后将会可以。

5 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位

7 条件判断及循环

@if判断

@if可一个条件单独使用，也可以和 @else 结合多条件使用

三目判断

if($condition, $if_true, $if_false)

for循环

for循环有两种形式，分别为：@for $var from

@each循环

语法为：@each $var in

多个字段list数据循环

//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; 
}

위 내용은 SASS 학습 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!