<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp><samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<tr id="cs8kc"><xmp id="cs8kc"><samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
<rt id="cs8kc"></rt>
<tr id="cs8kc"><xmp id="cs8kc">
<tt id="cs8kc"></tt>
<samp id="cs8kc"><wbr id="cs8kc"></wbr></samp>
首頁 > 課程庫 > 利用Sass編寫高質量CSS
利用Sass編寫高質量CSS

利用Sass編寫高質量CSS

這是一門CSS相關的進階教程,目標是讓你把知識從“會用”變成“用好”,讓你從“會寫代碼”過渡到“會寫高質量代碼”。

Web前端開發

18章節|29869次播放

8小時學習時長
更全面的職業課程大綱立即查看
  • css學習

    Sass學習路線

    課程介紹這不是一個CSS教學過程,但會有部分CSS的講解將為大家展示Sass編寫CSS的便捷性和可維護性學習對象1、有CSS基礎(Sass基于CSS),最好是HTML+CSS+JS基礎(Sass具有編程語言的特點)2、對前端有興趣,希望編寫出高質量的CSS代碼3、喜歡嘗試新技術帶來的便利性培訓目標1... 查看原文

  • css學習

    Sass簡介

    為什么需要CSS預處理器?對一般的項目直接用CSS就可以完成,但是對于一些大項目,這個時候如果單純的寫CSS相對復雜而且不太好維護。為什么使用Sass?使用變量自動轉換RGBA顏色值忘記瀏覽器前綴嵌套規則media query更簡單自動壓縮CSS什么是Sasshttp://sass-lang.com... 查看原文

  • css學習

    Compass簡介

    什么是CompassCompass是Sass的工具庫在Sass的基礎上封裝了一系列有用的模塊和模板,補充Sass的功能Compass與Sass的關系類似于jQucry與javaScript的關系Sass與Compass能做什么使用變量自動轉換RGBA顏色忘記瀏覽器前綴嵌套規則Media query更... 查看原文

  • css學習

    Sass,Less與Stylus

    背景Sass:Sass是對CSS(層疊樣式表)的語法的一種擴充,誕生于2007年,最早也是最成熟的一款CSS預處理器語言,它可以使用變量、常量、嵌套、混入、函數等功能,可以更有效有彈性的寫出CSS。Sass最后還是會編譯出合法的CSS讓瀏覽器使用,也就是說它本身的語法并不太容易讓瀏覽器識別,因為它不... 查看原文

  • css學習

    Sass命令行與注釋

    Sass基礎1.創建工程使用Sass創建利用Compass創建工程:打開指定目錄的控制臺窗口,輸出指令“copmpass create”即可創建。同時,可以帶參數創建:compass create --bare --sass-dir "sass" --css-dir "css" --images-d... 查看原文

  • css學習

    Sass變量與導入

    Sass變量1.局部變量2.全局變量$color: red !global;3.變量默認值$color: red !default;4.多值變量$colors: red blue green;color: nth($colors, 1);?$map: (key1:value1, key2:value... 查看原文

  • css學習

    Sass繼承與嵌套

    嵌套1.選擇器嵌套2.屬性嵌套3.&--引用父選擇器4.@at-root,跳出嵌套默認@at-root只會跳出選擇器嵌套,而不能跳出@media或@support,如果要跳出這兩種,則需使用@at-root (without: media),@at-root (without: support)。這... 查看原文

  • css學習

    Sass數據類型與mixin

    數據類型1.Number http://sass-lang.com/documentation/Sass/Script/Functions.html#number_functions2.Stringhttp://sass-lang.com/documentation/Sass/Script/Func... 查看原文

  • css學習

    Sass函數與調試

    內置函數1.?http://sass-lang.com/documentation/Sass/Script/Functions.html2.?rgb(),rgba()3.?lighten(),darken()4.?str-length(),str-index()自定義函數@debug、@warn、@... 查看原文

  • css學習

    Sass條件控制

    @if1.三目運算@if($condition, $condition_true, $condition_false)2.?@if...@else if...@else@for@for $i from 1 through 5 {??.span#{$i} { width: 20% * $i; }}@w... 查看原文

  • css學習

    Sass基礎項目結構

    以下實戰以Sass官網為例基礎項目結構1.base2.components3.helpers(1)variables(2)functions(3)mixins4.layout(1)header(2)footer5.pages(1)home(2)about(3)……6.themes課后任務搭建Sass... 查看原文

  • css學習

    Sass自動化構建

    自動化構建1.?gulp構建工具2.?gulp-compasshttps://www.npmjs.com/package/gulp-compass3.?browser-sync 4.?Css3:linear-gradient()https://developer.mozilla.org/en-US/... 查看原文

  • css學習

    Sass網站首頁布局

    網站首頁布局1.reset2.normalized(1)html5(2)base(3)links(4)typography(5)embeds(6)groups(7)forms(8)tables3.susy4.breakpoint5.頁面Layout代碼部分<!DOCTYPE html><html>?... 查看原文

  • css學習

    Sass網站首頁實現

    網站首頁的實現一.reset二.normalized(1)html5(2)base(3)links(4)typography(5)embeds(6)groups(7)forms(8)tables代碼部分<!DOCTYPE html><html>??<head>????<meta charset="u... 查看原文

  • css學習

    Sass網站公共組件實現

    公共組件1.alert2.banner3.page-header4.section-bottom5.contentinfo代碼部分.banner{margin;0;@include padding-leader(0.5);.size-brand{@include span(3);text-align... 查看原文

  • css學習

    Sass網站內容頁實現

    通用布局避免多層嵌套代碼部分<!DOCTYPE?html> <html> ??<head> ????<meta?charset="utf-8"> ????<meta?content="IE=edge"?http-equiv="X-UA-Compatible"> ????<title>Sas... 查看原文

  • css學習

    Sass網站響應式布局

    屏幕尺寸1.<7682.>=7683.>=9924.>=1200代碼部分<!DOCTYPE?html> <html> ??<head> ????<meta?charset="utf-8"> ????<meta?content="IE=edge"?http-equiv="X-UA-Compat... 查看原文

  • css學習

    Sass總結

    項目總結1. 利用編程語言書寫CSS2.?Sass項目結構3.?柵格化布局4.?響應式布局不足之處1.?項目選擇不佳,模仿網站不易利用compass的種種方便2.?使用Compass的東西比較少,更多的是Sass的基礎用法課程總結1.?基礎+簡單項目2.?Sass常用的工具庫期望1.?能起到拋磚引玉... 查看原文

  • 1-9章節課件所屬章節:1-9章節課件
    下載
  • 1-9章節源碼所屬章節:1-9章節源碼
    下載
  • 10-11課件所屬章節:10-11課件
    下載
  • 10-11素材文件所屬章節:10-11素材文件
    下載
  • 12-15課件所屬章節:12-15課件
    下載
  • 12-15源碼所屬章節:12-15源碼
    下載
  • 16-18章節課件所屬章節:16-18章節課件
    下載
  • 16-17章節素材文件所屬章節:16-17章節素材文件
    下載
Web前端開發胡敏

胡敏

TA的課程

5年后臺開發經驗,多年前端開發經驗。現就職與某外企旗下電商公司,從事前端技術支持和前端技術框架開發。

更專業的職業課程

Web前端開發23671位同學正在學習

Web前端開發

免費領取價值1888元求職寶典!

客服熱線 400-862-8862

回到頂部

天天撸一撸