說(shuō)到媒體查詢(xún)我想到的就是麻煩，要寫(xiě)很多代碼，而且難懂。當(dāng) Sass 推出了 @mixin 和 @content 后一切就感覺(jué)很舒服了。 例子 我...
投稿
收錄了20篇文章 · 82人關(guān)注
-
Sass: @media x @mixin x @content -
Sass: @mixin vs placeholder vs @function學(xué)習(xí) Sass 的時(shí)候總會(huì)發(fā)現(xiàn)這三個(gè)東西很像，因?yàn)樗麄兌际怯脕?lái)統(tǒng)一代碼來(lái)達(dá)到復(fù)用的目的的。這篇文章將用一個(gè)小例子來(lái)對(duì)比他們的不同之處。 例子 我...
-
Sass 基礎(chǔ)用法（下）
BEM命名法 Block Element Modifier Block: 主要名字 -> user-card。 Element: 兩個(gè)下劃線(xiàn)表示...
-
Sass 基礎(chǔ)用法（上）
嵌套 變量 Mixin（類(lèi)似于函數(shù)） 兩處地方用相同代碼時(shí)可以用Mixin講法，相當(dāng)于機(jī)械地拷貝CSS代碼到不同地方。 Placeholder（...
-
Sass 入門(mén)實(shí)戰(zhàn)
Sass 學(xué)習(xí)起來(lái)是很無(wú)趣的一件事，畢竟如果沒(méi)有項(xiàng)目單單看文檔是挺無(wú)聊的，還不如看政治課本有趣。這篇文章就從一個(gè)簡(jiǎn)單的例子入手，通過(guò)用 Sass...
-
Sass函數(shù)功能匯總
Sass自備了一系列的函數(shù)功能，大部分能通過(guò)普通的css語(yǔ)句直接調(diào)用。這篇文章會(huì)詳細(xì)介紹Sass的字符串函數(shù)、數(shù)字函數(shù)、列表函數(shù)、Introsp...
-
關(guān)于Sass的編譯風(fēng)格與編譯命令
Sass的編譯風(fēng)格并不單一，為了滿(mǎn)足不同工程師的編碼習(xí)慣和不同開(kāi)發(fā)項(xiàng)目的實(shí)際需求，Sass人性化的提供四種不同編譯風(fēng)格。這篇文章將會(huì)列舉出這四種...
-
通過(guò) sass-resources-loader 全局注冊(cè) Sass 變量
本文講述如何通過(guò) sass-resources-loader 全局注冊(cè)變量及由 @mixin、% 定義的通用樣式，以 vue 項(xiàng)目為例。 先描述...
-
純 Css 繪制扇形閱讀此文需具備基本數(shù)學(xué)知識(shí)：圓心角、弧度制、三角函數(shù)。 為實(shí)現(xiàn)如下效果嘔心瀝血： 當(dāng)然你可以擁抱 Svg...在此分享如何純 Css 打造圓環(huán)進(jìn)...
-
Sass 學(xué)習(xí)筆記本文以 sass 語(yǔ)法點(diǎn)為主線(xiàn)展開(kāi)，但語(yǔ)法細(xì)節(jié)不在此贅述，如有疑問(wèn)請(qǐng)移駕至 http://sass-lang.com 自行查閱。我所認(rèn)為的 sa...
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://upload.jianshu.io/collections/images/262404/image.jpeg', '推薦專(zhuān)題《Sass》（ 分享自 @簡(jiǎn)書(shū) ）','http://m.itdecent.cn/c/05d2d3ed3a62?utm_campaign=maleskine&utm_content=collection&utm_medium=reader_share&utm_source=weibo','頁(yè)面編碼gb2312|utf-8默認(rèn)gb2312'));){kind=link}