Submit Search
Upload
建立 Sass 環境,透過 Node sass
•
8 likes
•
4,247 views
Chih-cheng Wang
Follow
高雄前端社群 CSS 讀書會,建立 Sass 環境
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 44
Download now
Download to read offline
Recommended
Základy jQuery
Základy jQuery
Juraj Michálek
Menu css
Menu css
Abdel Suarez
Drop down horizontal menu
Drop down horizontal menu
Oelva
Bootstrap Html5 Cart
Bootstrap Html5 Cart
trijuissac
Exemplositecss
Exemplositecss
augustodebian
Yeni metin belgesi
Yeni metin belgesi
Cenk Türk
Sombras e efeitos no Html 5 e CSS3
Sombras e efeitos no Html 5 e CSS3
Flavia Siqueira
Animate
Animate
Saint Columban College
Recommended
Základy jQuery
Základy jQuery
Juraj Michálek
Menu css
Menu css
Abdel Suarez
Drop down horizontal menu
Drop down horizontal menu
Oelva
Bootstrap Html5 Cart
Bootstrap Html5 Cart
trijuissac
Exemplositecss
Exemplositecss
augustodebian
Yeni metin belgesi
Yeni metin belgesi
Cenk Türk
Sombras e efeitos no Html 5 e CSS3
Sombras e efeitos no Html 5 e CSS3
Flavia Siqueira
Animate
Animate
Saint Columban College
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
Google design
Google design
Chih-cheng Wang
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
Chih-cheng Wang
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
Shengyou Fan
webpack 入門
webpack 入門
Anna Su
六角學院 - 從社群到公司
六角學院 - 從社群到公司
Chih-cheng Wang
網址管理與 DNS 託管全攻略
網址管理與 DNS 託管全攻略
Chih-cheng Wang
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
Chih-cheng Wang
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
[Modern Web] CSS3 Grid Layout
[Modern Web] CSS3 Grid Layout
Chih-cheng Wang
Slack 基本功能介紹
Slack 基本功能介紹
Chih-cheng Wang
More Related Content
Viewers also liked
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
Google design
Google design
Chih-cheng Wang
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
Chih-cheng Wang
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
Shengyou Fan
webpack 入門
webpack 入門
Anna Su
Viewers also liked
(9)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
Google design
Google design
響應式網頁實作坊
響應式網頁實作坊
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Object Oriented CSS
Object Oriented CSS
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
webpack 入門
webpack 入門
More from Chih-cheng Wang
六角學院 - 從社群到公司
六角學院 - 從社群到公司
Chih-cheng Wang
網址管理與 DNS 託管全攻略
網址管理與 DNS 託管全攻略
Chih-cheng Wang
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
Chih-cheng Wang
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
[Modern Web] CSS3 Grid Layout
[Modern Web] CSS3 Grid Layout
Chih-cheng Wang
Slack 基本功能介紹
Slack 基本功能介紹
Chih-cheng Wang
More from Chih-cheng Wang
(6)
六角學院 - 從社群到公司
六角學院 - 從社群到公司
網址管理與 DNS 託管全攻略
網址管理與 DNS 託管全攻略
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
[Modern Web] CSS3 Grid Layout
[Modern Web] CSS3 Grid Layout
Slack 基本功能介紹
Slack 基本功能介紹
建立 Sass 環境,透過 Node sass
1.
2.
3.
4.
5.
6.
7.
8.
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } >
9.
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; } >
10.
11.
12.
13.
14.
Adobe Creative Cloud
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<%= contents %> <%= title %>
33.
<%- contents %> <%- include %>
34.
--- title: layout: ./source/layout.ejs engine: ejs --- <p> </p> <div> <%- contents %> </div> <div> <p>
</p> </div>
35.
<p> </p> <div> <%- include part %> </div> <div> <p> </p> </div>
36.
--- title: layout: ./source/layout.ejs engine: ejs --- <title><%= title %></title> <title> </title>
37.
38.
39.
/* * public */ others: [ '**/*.html', '**/*.ejs', '**/*.scss', '**/*.sass', '**/*.css' ],
40.
/* * */ paths: { // 'source': './source/', 'sass': './source/stylesheets/', 'img': './source/images/', //
'sass_output': 'stylesheets/', 'public': './public/', },
41.
/* * CSS, PostCSS, Sass * PostCSS
autoprefixer */ postcss: { 'enabled': true, // PostCSS 'output_name': 'all.css', // CSS 'output_folder': 'css' // CSS }, sass: { 'output_style': 'compressed' // sass 'nested', 'expanded', 'compact', 'compressed' }
Download now