sass運用減化CSS重覆書寫工作

sass運用減化CSS重覆書寫工作

練習範例

See the Pen scss try by zoelu (@zoego) on CodePen.0

 

 

1.html結構

<body>
    <header>
        <nav>
            <li><a href="#">item01</a></li>
            <li><a href="#">item02</a></li>
            <li><a href="#">item03</a></li>
            <li><a href="#">item04</a></li>
        </nav>
        <div id="logo"><a href="#">Happy School快樂學園</a></div>
    </header>
</body>

2.scss美化

(1) 基本結構

(2) 變數(variables)設定

1.變數是用【$】符號開頭

2.將時常需要設定的CSS值放在變數來管理

3.變數裡面還可以帶變數

4.常用顏色變數功能:

darken($blue,10%)  → 將變數色系調暗10%
lighten (#ff0000,10%) → 將色碼色系調亮10%

5.變數格式

數字:10、1px、3em
字串:’test’、 “../images/big/“
顏色:red、#000000、rgba(255,255,255,0.9)
布林:true、flase
空值:null

6.支援運算(1em+1em、6px*2)

/*變數設定*/
$mainColor:#b71c1c;

/* SCSS書寫結構*/
*{padding: 0; margin: 0;}

  li{
    list-style:none;  float:left; background: lighten($mainColor,50%);
    height:50px; line-height:50px;
    /* 方法1 寬度設定方法1
      border:1px solid $mainColor;width:25%;  box-sizing: border-box;
    */
      
    /*方法2 寬度設定方法2 */
    border:1px solid $mainColor; width:calc(100%/4 - 2px); 
      
      a{text-decoration:none; font-size:12px*2; color:$mainColor;
        text-align:center; 
        width:100%; height:100%; display:block;        
      }
  }

(2) @mixin:自訂組件   @include:載入組件

(3) @import 匯入檔案 

新增【_reset.scss】,然後【@import “reset.scss”; 】即可

 

/*@import匯入檔案 =====================================
  *{padding: 0; margin: 0;} 移入  * /
@import "reset.scss"; 


/*變數設定 =====================================*/
$mainColor:#b71c1c;
$logowidth:300px;


/*@mixin:自訂組件   @include載入組件======================= */
@mixin awh100{ width:100%; height:100%; display:block;}

@mixin hideText {
  text-indent:100%;  white-space:nowrap;  overflow:hidden;
}

@mixin pos50($logowidth){
    position: absolute; left: 50%; margin-left: -$logowidth/2 ;
}

/*scss 美化結構=====================================*/
header{
  li{
    list-style:none;  float:left; background: lighten($mainColor,50%);
    height:50px; line-height:50px;
    /* 方法1 寬度設定方法1
      border:1px solid $mainColor;width:25%;  box-sizing: border-box;
    */
      
    /*方法2 寬度設定方法2 */
    border:1px solid $mainColor; width:calc(100%/4 - 2px);  
      a{text-decoration:none; font-size:12px*2; color:$mainColor;
        text-align:center;
        @include awh100;}
  }
    
  #logo{ background:url(https://zoego.tech/ex/dw01/image/logo.png) no-repeat;
        width:$logowidth; height:$logowidth/1.5; background-size:contain;
        @include pos50($logowidth); top:25px;
      a{ @include awh100;
         @include hideText;}
    }
    
}