Sass를 처음 사용하는 경우

MOOC.com, http://www.imooc.com/learn/364에서 선배 materliu의 튜토리얼을 살펴보세요. 그런데 방금 끝낸 프로젝트를 재구성해서 여기에 몇 가지 메모와 경험을 적어보겠습니다~

먼저 Sass를 설치하려면 여기에서 다모 선배님의 설치 튜토리얼 http://www.w3cplus.com/sassguide/install.html을 직접 참고하실 수 있습니다.

그런 다음 compass를 설치하고 ruby ​​명령에 gem install compass 명령을 입력합니다. 이 단계에서는 compass에 대해 잘 이해가 되지 않습니다. 및 압축 CSS(안개).

나침반 명령:

나침반은 나침반을 만듭니다

나침반 시계;

Sass 구문:

파일을 컴파일할 필요가 없는 경우 접두사 밑줄로 표시한 다음 이름을 지정할 수 있습니다. 일반적으로 함수나 변수는 폴더에 배치됩니다.

가져오기를 사용하여 파일을 가져올 수 있으며 파일 이름 접미사를 작성할 필요가 없습니다. 그러나 이는 기본 CSS 가져오기가 아닙니다.

기본 CSS 가져오기에는 두 가지 주요 단점이 있습니다. 1. 코드 앞에 배치해야 합니다. 2. 성능에 해롭다. 기본 가져오기를 실제로 사용하려면 다음을 수행하세요. 1. CSS로 끝나는 경우. 2. http://로 시작합니다. 3. URL() 함수. 4. 미디어 쿼리를 사용합니다.

Sass 변수: 좋은 점은 색상을 찾을 때마다 색상 코드가 기억나지 않는다는 점입니다. 변수를 사용하면 그렇게 천천히 색상 코드를 찾을 필요가 없습니다. 변수 파일을 보면 한눈에 알 수 있습니다.

특수 변수, 특정 상황에서 사용되는 변수

예:

　

<span style="color: #800000;">//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> $common-ff</span>;
}<span style="color: #800000;">
//css输出----
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}<span style="color: #800000;">

//特殊变量
$direction: top;
//应用于class和属性
.border-#</span>{<span style="color: #ff0000;">$direction</span>}{<span style="color: #ff0000;">
  border-#{$direction</span>}<span style="color: #800000;">:1px solid #ccc;
}
//应用于特殊属性同理</span>

다중 값 변수: 이름에서 알 수 있듯이 여러 값을 갖습니다. 예를 들어 0 1px 2px 3px 등입니다. 그 안에는 많은 함수가 있는데, 나는 당분간 Append($list,$value,[$separator])만 사용했습니다.

Mixin: @include로 호출되는 @mixin을 통해 선언됨

저는 프로젝트를 할 때 Flex를 이용해서 이런 스타일을 많이 쓰곤 했어요

<span style="color: #800000;">button,input,textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

이렇게 쓰기엔 너무 번거로워서 sass를 배운 후 타오바오닷컴에 써놓은 하이브리드 매크로를 참고해서 직접 써봤습니다

<span style="color: #800000;">@mixin property-dpr($property,$px-values)</span>{<span style="color: #ff0000;">
        //判断参数是不是单个数字，若是
        @if type-of($px-values) == "number"{
                #{$property</span>}<span style="color: #800000;">: $px-values;
            [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 2;
            }
            [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 3;
            }
        }
        //若为数组则
        @else </span>{<span style="color: #ff0000;">
            //新建两个空数组
            $twodpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            $threedpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            //遍历多值变量
            @each $value in $px-values{
                $twodpr-values</span>:<span style="color: #0000ff;">append($twodpr-values,$value*2)</span>;<span style="color: #ff0000;">
                $threedpr-values</span>:<span style="color: #0000ff;">append($threedpr-values,$value*3)
            </span>}<span style="color: #800000;">
            // 返回处理后的多值变量
               #</span>{<span style="color: #ff0000;">$property</span>}<span style="color: #800000;">: $px-values;
                [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $twodpr-values;
                }
                [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $threedpr-values;
                }
        }
}</span>

CSS, Sass 생성 코드:

<span style="color: #800000;">//调用mixin
div</span>{<span style="color: #ff0000;">
    @include property-dpr(font-size,12px);
</span>}<span style="color: #800000;">
//css style
div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 7, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="2"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 10, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="3"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

오늘은 여기서 마치겠습니다.