CSS棰勫鐞嗗櫒scss/sass璇硶鍙婁娇鐢ㄦ暀绋媉CSS鏁欑▼_CSS

来源：jb51　　时间：2023/1/11 8:39:19　　对本文有异议

scss

scss鍦╟ss鍩虹璇硶涓婇潰澧炲姞浜嗗彉閲?(variables)銆佸祵濂?(nested rules)銆佹贩鍚?(mixins)銆佸鍏?(inline imports) 绛夐珮绾у姛鑳斤紝浣跨敤scss鍙互寰堟柟渚跨殑鎻愰珮寮€鍙戞晥鐜?br /> scss璇硶浠?code>.scss鏂囦欢鍚庣紑缁撳熬锛屽叾涓娉曟牸寮忔湁涓ょsass,scss,涓ょ璇硶鍦ㄤ功鍐欓鏍兼湁宸紓锛屽涓嬩唬鐮佹墍绀?/p>

scss

.container {
    width: 100px;
    height: 100%;
    .nav {
        width: 100px;
    }
}

sass

.container 
    width: 100px;
    height: 100%;
    .nav 
        width: 100px;

璇硶

宓屽瑙勫垯 `(甯哥敤)`

scss鍏佽灏嗕竴濂梒ss鏍峰紡宓屽叆鍙︿竴濂楁牱寮忎腑锛屽灞傜殑瀹瑰櫒灏嗕綔涓哄唴灞傚鍣ㄧ殑鐖堕€夋嫨鍣紝濡備笅浠ｇ爜

.container {
    width: 500px;
    height: 100px;
    header {
        width: 100%;
        height: 20%;
    }
    main {
        width: 100%;
        height: 20%;
    }
    footer {
        width: 100%;
        height: 20%;
    }
}

缂栬瘧鍚?/code>



.container {
    width: 500px;
    height: 100px;
}
.container header {
    width: 100%;
    height: 20%;
}
.container main {
    width: 100%;
    height: 20%;
}
.container footer {
    width: 100%;
    height: 20%;
}

鐖堕€夋嫨鍣?nbsp;(甯哥敤)
鏈夋椂闇€瑕佸湪鍐呭眰鏍峰紡鍐呴€夋嫨澶栧眰鐨勭埗鍏冪礌锛岄偅涔堝氨鍙互浣跨敤&绗﹀彿锛屽涓嬩唬鐮佹墍绀?/p>

.container {
    width: 500px;
    height: 100px;
    &_header {
        width: 100%;
        height: 20%;
        &:hover {
            color: red($color: #000000);
        }
    }
    &_main {
        width: 100%;
        height: 20%;
        &:disabled {
            color: red;
        }
    }
    &_footer {
        width: 100%;
        height: 20%;
        &::after {
            position: absolute;
            content: '';
        }
    }
}


缂栬瘧鍚?/code>



.container {
    width: 500px;
    height: 100px;
}
.container_header {
    width: 100%;
    height: 20%;
}
.container_header:hover {
    color: 0;
}
.container_main {
    width: 100%;
    height: 20%;
}
.container_main:disabled {
    color: red;
}
.container_footer {
    width: 100%;
    height: 20%;
}
.container_footer::after {
    position: absolute;
    content: '';
}

灞炴€х畝鍐?nbsp;(涓嶅父鐢?

.container {
    width: 500px;
    height: 100px;
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
    background: {
        image: url('xxx');
        size: 100%;
    }
}


缂栬瘧鍚?/code>



.container {
    width: 500px;
    height: 100px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
    background-image: url('xxx');
    background-size: 100%;
}

鍙橀噺 (甯哥敤)
scss涓娇鐢?code>$绗﹀彿瀹氫箟鍙橀噺

    鍏ㄥ眬鍙橀噺

    鍦╯css鏂囦欢椤堕儴瀹氫箟鐨勫彉閲忥紝涓哄叏灞€鍙橀噺


$font-color: red;
$font-size: 18px;
$font-size-base: $font-size;
 
.text {
    color: $font-color;
    font-size: $font-size;
}
 
span {
    font-size: $font-size-base;
}


缂栬瘧鍚?/p>


.text {
    color: red;
    font-size: 18px;
}
 
span {
    font-size: 18px;
}


    灞€閮ㄥ彉閲?br />
    鍦ㄥ睘鎬у唴瀹氫箟鐨勫彉閲忎负鍧楃骇鍙橀噺


.text {
    $font-color: red;
    $font-size: 18px;
    $font-size-base: $font-size;
    h1 {
        color: $font-color;
        font-size: $font-size;
        span {
            color: $font-color;
            font-size: $font-size;
        }
    }
}


缂栬瘧鍚?/p>


.text h1 {
    color: red;
    font-size: 18px;
}
.text h1 span {
    color: red;
    font-size: 18px;
}

杩愮畻 (甯哥敤)
scss涓敮鎸?code>+ - * /杩愮畻

$base-width: 10;
$small-width: 30;
$large-width: $base-width + $small-width;
 
.div {
    width: $large-width + px;
}
 
.div1 {
    width: $small-width - $base-width + px;
}
 
.div2 {
    width: $small-width * $base-width + px;
}
 
.div2 {
    width: calc($small-width / $base-width) + px;
}


缂栬瘧鍚?/p>


.div {
    width: 40px;
}
 
.div1 {
    width: 20px;
}
 
.div2 {
    width: 300px;
}
 
.div2 {
    width: 3px;
}

@extend
scss鍏佽浣跨敤@extend闆嗘垚鍏朵粬鏍峰紡瑙勫垯

.item {
    width: 100%;
    height: 20%;
    background-color: red;
}
 
.item-1 {
    @extend .item;
    border: 1px solid blue;
}
 
.item-2 {
    @extend .item;
    border: 2px solid blue;
}


缂栬瘧鍚?/p>


.item,
.item-2,
.item-1 {
    width: 100%;
    height: 20%;
    background-color: red;
}
 
.item-1 {
    border: 1px solid blue;
}
 
.item-2 {
    border: 2px solid blue;
}

@if
褰撴潯浠舵弧瓒虫椂锛岃緭鍏ュ搴旂殑鏍峰紡

p {
    @if 1 + 1 == 2 {
        border: 1px solid;
    }
    @if 5 < 3 {
        border: 2px dotted;
    }
    @if null {
        border: 3px double;
    }
}
 
$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}


缂栬瘧鍚?/p>


p {
    border: 1px solid;
}
 
p {
    color: green;
}

@for

    璇硶涓€锛?code>@for $var from <start> through <end>浠巗tart寮€濮嬶紝鍖呭惈end


@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}


缂栬瘧鍚?/p>


.item-1 {
    width: 2em;
}
 
.item-2 {
    width: 4em;
}
 
.item-3 {
    width: 6em;
}


    璇硶浜岋細@for $var from <start> to <end>浠巗tart寮€濮嬶紝涓嶅寘鍚玡nd


@for $i from 1 to 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}


缂栬瘧鍚?/p>


.item-1 {
    width: 2em;
}
 
.item-2 {
    width: 4em;
}

鍒版杩欑瘒鍏充簬CSS棰勫鐞嗗櫒scss/sass璇硶鍙婁娇鐢ㄦ暀绋嬬殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧css棰勫鐞嗗櫒scss鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒