## CSS
CSS, Cascading Style Sheets,層疊樣式表,是HTML文件中用來顯示樣式的一種標識語言。可以用來設置字體、顏色、邊框距離等。
Sass(Syntactically Awesome Style Sheets) 語法很棒的樣式表。
2010 SCSS , Sass CSS。
CSS缺點: 大型項目選擇器,層疊復雜度高。
Sass接近編程語言,提供變量、嵌套、混合、繼承等特性。
https://sass-lang.com/guide
Sass基于Ruby開發。
## VS 插件
Live Sass Compiler
安裝之后,點擊最下方的 "Watch Sass", 會實時編譯打開目錄的scss 文件。
自動產生一個 .css.map 后綴的文件, 里面內容是源文件和編譯后的css文件的對應。
注意: 打開到指定目錄, 會掃描打開目錄的所有文件。
## 變量 Variables
## 嵌套 Nesting
不宜過度
## 模塊(Modules)
```
//模塊
@import 'base';
html{
background-color: $hcolor;
}
//嵌套
html {
body {
background-color: $hcolor;
}
}
```
## 混合 Mixin
Mixin翻譯過來是混合, 所以這個功能也稱為混合宏,其實就是相當于函數。
* 使用@mixin 定義
* 使用@include調用
在瀏覽器兼容的時候非常有用。
```
@mixin div-size($width:50px,$height:50px)
{
width:$width;
height:$height;
}
#div1 {
@include div-size;
}
#div2 {
@include div-size(100px,100px);
}
```
## 繼承
## 操作符
## CSS擴展
引用父級選擇器 "`&`"
## 嵌套屬性
```
//引用父級選擇器
a{
font-weight: bold;
&:hover{text-decoration: underline;}
}
#mydiv{
a{
font-weight: bold;
&:hover{text-decoration: underline;}
}
}
#mydiv2{
&-sidebar{
border:1px;
}
}
//命名空間
.myclass{
//命名空間后有冒號
font: {
size:30em;
}
}
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS