業餘IT人的部落格

@mixin 能幫助你記住CSS技巧,不用再回頭想起打斷思緒
我覺得 @mixin 就等同於自己的筆記本
今天這功能你突然忘記一些語法的時候大家都會上網找或是翻閱自己的筆記本，這樣會浪費許多時間
不如使用 @mixin 來幫你記住這些程式碼
你只要知道你命名的 @mixin 名稱用 @include 就可以自動幫你從 @mixin 裡面拉出來

以下是H1圖片取代文字的範例檔：

demo/
├── css/
│   ├── all.css
└── sass/
    ├── _mixin.scss
    ├── _main.scss
    └── all.scss
 

SASS下的_mixin.scss

@mixin hide-text{
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

 

SASS下的_main.scss

.header{
    .h1{
        background: url('../images/logo.png');
        width: 150px;
        height: 50px;
        @include hide-text;
    }
}

 

SASS下的all.scss

//主要樣式
@import "mixin";
@import "main";

 

SASS經過編譯後,CSS會自動抓取hide-text的值來貼到.header .h1裡面如下：

css下的all.css

.header .h1 {
    background: url("../images/logo.png");
    width: 150px;
    height: 50px;
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
}