【筆記】SCSS 文字刪節號-webkit-box-orient: vertical;與 "autoprefixer: off"

在CSS裡，文字超過行數限制時會自動顯示"..."的刪節號，

SCSS語法如下

@mixin text-truncate() {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: $line-height-base;
   word-wrap: break-word;
   white-space: normal;

 /*! autoprefixer: off */
   box-orient: vertical;
   -webkit-box-orient: vertical;
  /* autoprefixer: on */
   }

@for $i from 1 to 6 {   .text-truncate-#{$i} { @include text-truncate; max-height: #{$line-height-base * $i}em ; -webkit-box-orient: vertical; -webkit-line-clamp: $i; } }

［感想］好的CSS與樣板框架的寫法

1. css一開始要先宣告語系@charset "utf-8";
   
   因為在編譯、轉譯、上版（系統也許會針對自動合併，自動化執行一些合併行為），
   過程中可能會造成『中文註解』被編譯成亂碼，
   造成CSS原本的註解，有開始但是沒結束，頁面就會破版。
   
   
   
   最一勞永逸的方式，還是只用英文或數字撰寫。
   
   

【SCSS】2.9用SCSS寫root（第一次就失敗）

Bootstrap的SCSS資料夾內，有一枚 _root.scss，這個檔案轉譯之後就像是CSS註解，可以把一些設定的基本規則寫在上面。

Bootstrap的 _root.scss 的寫的很簡單，只有顏色定義、跟斷點。
顏色的寫法很簡單，只用到 Variables(變數) + @each 迴圈
然後我就滿心歡喜寫下了這個

SCSS

:root {

// Custom variable values only support SassScript inside `#{}`.

@each $color, $value in $colors {

  --#{$color}: #{$value};

}

@each $color, $value in $theme-colors {

  --#{$color}: #{$value};

}

}

【SCSS】2.8 @extend (共用)

@extend翻譯成共用或是繼承，在瀏覽一些別人的學習心得時發現，有人認為 @extand 會讓CSS品質變差，所以不建議使用。


真正在執行專案的時候，我是不太使用@extend，雖然在SCSS 裡寫@extend會讓程式碼變短，看似很是方便，但解譯後的CSS不易閱讀，整體的CSS體積也會變大。如果小專案也許CSS微胖並沒有什麼影響，但是大專案對CSS的K數是很斤斤計較的（就像女人對自己的體重一樣，能少0.1Kg也是好的！！！）。


我們用實際的語法來說明

語法範例SCSS

//設定小圖示

.miao-icon{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/icon.png) no-repeat 80px 80px; background-size: 48px;}

.miao-icon_prev {

@extend .miao-icon;

 background-position: 0px 0px;

}

.miao-icon_next     { @extend .miao-icon; background-position: 0px -24px;}

.miao-icon_up       { @extend .miao-icon; background-position: 0px -48px;}

.miao-icon_down     { @extend .miao-icon; background-position: 0px -72px;}

編譯後CSS

.miao-icon, .miao-icon_prev, .miao-icon_next, .miao-icon_up, .miao-icon_down {

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

background: url(../Images/icon.png) no-repeat 80px 80px;

background-size: 48px;

}

.miao-icon_prev { background-position: 0px 0px;}

.miao-icon_next { background-position: 0px -24px;}

.miao-icon_up { background-position: 0px -48px;}

.miao-icon_down { background-position: 0px -72px;}

若是真的要使用的話，要有所限制，建議：

1. 層次越扁平越好，最好是一層
2. 單元性使用，不要跨單元

在原始CSS裡有個語法類似@extend，叫做[class*='miao-icon']用上述的例子，純CSS這樣寫也能達到一樣的效果

【SCSS】2.7 @Mixins(混合) + @include(擴充 / 繼承)

本來只想寫試寫Mixins，不過偷剪BootStrap的範例時，發現他是連同include寫在一起，我不會拆開，索性一起貼上試跑看看，誒...然後...他就轉譯成功了......


官方說法（然後我看完並不懂他再說什麼）：
http://sass.bootcss.com/docs/sass-reference/#control_directives
Mixins允許您定義可以在整個樣式表中重複使用的樣式，而無需使用非語義類.float-left。Mixins還可以包含完整的CSS規則，以及Sass文檔中其他地方允許的任何其他規則。他們甚至可以採取一些參數 ，這些參數可以讓你用很少的mixin來製作各種各樣的風格。


看完程式碼後的理解：
Variables(變數) = 定義一個變數名，並決定這個變數名的值（可以是數字、單位、顏色...）
取用的時候直接寫 $變數名 
例如：

【SCSS】2.6 map 與 @each 迴圈

延續上述的例子，當你以為寫到這樣就很迷人，那就錯了。

.color-primary {color: $primary;}

.color-warning {color: $warning;}

.color-xxxxx01 {color:...

.color-xxxxx02 {color:...

.color-xxxxx03 {color:...

.color-xxxxx04 {color:...

.color-xxxxx05 {color:...

程式碼就跟迷你裙一樣越短越好，當色碼超過10個，整段看起來就會很恐怖。而且一直寫重複的名稱讓我覺得自己像個智障= =|||

【SCSS】2.5 Variables(變數)

用設計師的角度來看，變數的概念，類似PS裡的智慧型物件，可重複使用。

功能	用來儲存值，方便重複利用
表示方式	$自己取的變數名
資料型態	Numbers、Strings、Booleans、null 值（視為空值），甚至可以使用 Lists、Maps。 數字，含小數（有單位或無單位皆可） 字串，如 "String" , 'String' , String 3 種皆可 顏色，如 blue , #0a43f9 , rgba(255, 0, 0, 0.5) 等 布林值（Booleans）： true , false 空值 null 串列，例如 $font-list: Helvetica, Arial, sans-serif; ，以空格或逗號分隔的一連串的值 鍵值映對(maps) ，例如： $map: (key1: value1, key2: value2, key3: value3); 函數參照(function references)

BootStrap將SCSS-Variables(變數)，獨立出來成立一支_Variables.scss，這的確是非常聰明的做法，當任何一隻SCSS要取用Variables(變數)的時候，都只要填入變數名稱，即可帶入進行運算。

【SCSS】2.4 @for(迴圈)

迴圈就是重複的執行的意思。迴圈包迴圈是可以的，無線迴圈是不道德的。
在此懇求說話無線迴圈的人（例如我媽)，求你行行好...改成有限迴圈，而且i < 3，口 以嗎？

這單純是為了寫範例而做的，真正在BootStrap裡的灰階，並不是這樣做的。下方範例是字體顏色+背景為rgba，  ($i)   也可以直接寫成  $i  ， 不過工程師說，用()包起來是好習慣，那就醬

語法範例SCSS

//gray字體顏色+背景 @for   $i from 1 through 9 { //從 1 到 9 共執行 9 次。   .color-gray#{$i}00 {     color: rgba( 0,0,0,($i) /10 ); } .bg-gray#{$i}00 {   background-color: rgba( 0,0,0,($i) /10 ); }

【SCSS】2.3 @import (引用)

這和css的 import 概念是一樣的，用法也類似。這裡用bootStrap當範例：

【SCSS】2.2 註解種類

1. //編譯後會消失
2. /content/編譯後會出現在.css內
3. /**/編譯後為.css的註解

【SCSS】2.1 資料夾與檔案命名

本來想依照BootStrap建立資料及與相關檔案，但是他的架構實在太龐大，不適合連注音都看不懂的幼幼班。媽媽說學習要按部就班，先學爬在學走！！所以先從小的架構開始寫起。

【SCSS】2.0 學習日誌

以下是一邊看著BootStrap（天書呀QAQ），一邊查看各種資源(包含活生生的工程師們)，試圖轉碼出來的心路歷程。


寫學習日誌是因為深知自己是金魚腦，就算現在試成功了以後也還是會忘。


為了方便找資源的夥伴們快速左轉（掩面），說明一下目前自身能力

會的	不會的
HTML熟 CSS熟 具有RWD排版概念	除了左邊的，其他程式全都不會

【筆記】1.7 VS Code 外掛 Live Sass Compile Config

撰寫SCSS， Live Sass Compile Config 外掛是絕對必要的存在，
這也是我當初從眾多軟體中決定使用 VS Code 的主因，
在此簡述一下 Live Sass Compile Config 的優點以及設定

1. 自動偵錯
安裝之後，編寫SCSS Code的過程中，
 Live Sass Compile Config 會自動檢查程式碼是否正確，
如果編譯正確，在畫面下方出現綠色的『success』
如果編譯錯誤，則出現紅色的『error』

【筆記】1.5 SCSS 和 Sass 的差異比較

	SCSS	SASS
共同優點	具有變數，簡單邏輯程式、函式...等等 語法比css簡潔（很多東西不用重複寫 具有擴充性與更多彈性 適合大型專案 兼容CSS
共同缺點	進入門檻高 維護門檻高 初學者成本高 團隊協作成本提升 學之前還是要先懂css
適合對象	設計師	工程師
優點	和css相似，使用{ } 與；對於設計師來說容易上手 Bootstrap使用scss，是個很好的學習範本	程式碼縮短非常多，層次直觀 來自Python, Ruby的工程師，甚至可以用類似符號的語法編寫道具 對使用CoffeeScript的人來說，能自然的編寫mixins，函數，以及重複使用的東西 兼容SCSS
缺點		學習門檻高 安裝環境複雜 巢狀多層的時候，CSS會變得很難維護，不好讀
支援	變數、@mixin、@extend	變數、@mixin、@extend
引入@minxin	前面寫@include	前面加「+」就可以載入mixin
寫Mixin	須用｛｝將內容包住	無
寫巢狀繼承	須在繼承的父元素裡面撰寫class與class的css