iT邦幫忙

sass相關文章
共有 203 則文章

技術 格線系統(2) DAY44

今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...

技術 格線系統(1) DAY43

這裡要先介紹為什麼要 模組化格線系統?? 因為若因 功能性命名區塊若命名為某個功能之後就不會運用在其他區塊 模組化格線 優點避免命名上的問題整體性高可用性高...

技術 7+1 Sass 設計模式 DAY42

7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...

技術 BEM 基礎介紹 DAY41

BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...

技術 CSS 命名基礎介紹 DAY40

今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...

技術 OOCSS 基礎介紹 DAY39

OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...

技術 Sass/Css Smacss模組化 DAY38

這裡必須先介紹為什麼我們需要模組化呢?這裡舉一個例子我們尚未模組化的css //基本按鈕 .btn{ display: inline-block; wi...

技術 Sass/Css 設計模式(Smacss) DAY37

今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識 最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...

技術 Sass @mixin實現RWD DAY36

今天我們要來介紹Sass Mixin 與 content的搭配 來解決RWD Scss: @mixin pad{ @media(max-width: 7...

技術 Sass @mixin DAY35

今天要來介紹 Sass Mixin那究竟什麼是 Mixin呢??簡單來說Mixin能幫你記住 css技巧讓你不用再因回想原理而去google(把它想像成一個包裝...

技術 Sass @import DAY34

今天我們要來學習如何把Sass切分支許多檔案這樣會使我們比較容易管理 @import(匯入)可將 Scss檔案彙整成一支 css檔案簡單來說就是我們可以把 Sc...

技術 Sass 變數 與 darken , lighten DAY33

今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...

技術 Sass 連接詞(&)基礎介紹 DAY32

在介紹今天的內容之前推薦一個不錯的東西那就是 CodePen啦https://codepen.io/your-work可以先上撰寫程式碼連 Sass也支援 非常...

鐵人賽 自我挑戰組 DAY 30
JavaScript基礎30天 系列 第 30

技術 總結 DAY30 耶 成功啦~~

第一次參加鐵人賽非常的開心又緊張啊(害怕自己寫錯哈哈)不過總覺得每日發文會上癮雖然可能沒人會看但重點在於 自己 是否有成長只要有 那就值得啦~~~ 雖然30天說...

鐵人賽 Modern Web DAY 12

技術 [CSS] Sass 入門教學-新手上路重點摘要(下)

好的~上一篇已經學會了 Sass 基本的語法應用,這篇來介紹 Sass 的進階語法,讓你會一度有 CSS 是程式語言的錯覺。 先記住這兩個語法 定義變數va...

鐵人賽 Modern Web DAY 11

技術 [CSS] Sass 入門教學-新手上路重點摘要(上)

我假設你已經會... 使用 CSS 定義樣式(選用適當的選擇器定義屬性與屬性值) 已配置 Sass 編譯 CSS 的開發環境(若還沒,使用線上編輯器 Cod...

鐵人賽 Modern Web DAY 11

技術 SASS/SCSS 簡介

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...

技術 Sass 基礎教學 DAY31

Sass 我們應該大部分的人都有聽過那它到底是什麼東西呢??我們先來介紹它到底是啥 維基百科https://zh.wikipedia.org/wiki/Sass...

技術 [Sass]造輪子-用@mixin做一個簡單的loading動畫

話不多說,先上成果! 思考迴路: 撰寫keyframes使每個點上下移動(transform),我們命名這個keyframe為waving 每個點都具備相同...

技術 Sass/Scss 基礎知識 學習筆記

Sass/Scss是一個非常好用的預處理器,所謂預處理器,就是可以在我們轉變成CSS之前,更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼,在大型專案中可說是...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...

技術 Scss - 小知識與進階功能 ( 上 )

之前介紹過 SCSS 的基礎功能了,沒看過可以看這裡唷,這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種,一種會被輸出一...

技術 Scss - 小知識與進階功能 ( 下 )

接續上篇繼續介紹剩下的功能,這邊就比較偏程式面,設計函式會比較常使用到,GO!GO!GO! 迴圈部分 迴圈可使用 @each 與 @for 來產生重複的樣式,使...

技術 Sass 學習筆記

Variable$variablename: valuedefine all global variables in "_globals.sass...

技術 Scss - 基礎功能介紹

SASS / SCSS 簡介 SASS 是 CSS 的預處理器,它能編譯出原生 CSS,且提供了更多程式面的東西來撰寫 CSS,讓其更簡潔、更好維護,而 SAS...

鐵人賽 自我挑戰組 DAY 23

技術 Day23 學習 scss 時的那些大小事

分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...

鐵人賽 Software Development DAY 17
可不可以不要寫糙 code 系列 第 17

技術 過度依賴前置處理器

良好程式碼的優點大同小異。不好的程式碼的糙點卻各有巧妙之處。 此篇的 coding 建議,不適用於 C 前置處理器 C 語言做到 template 或 g...

鐵人賽 自我挑戰組 DAY 13

技術 [蛻變事實/D13] 設計師勇闖前端城-( SASS & SCSS 的@import 是什麼?)

CSS 它有先後順序,後面會蓋掉前面! <link rel="stylesheet" href="style/style1....

鐵人賽 自我挑戰組 DAY 12

技術 [蛻變事實/D12] 設計師勇闖前端城-( SASS & SCSS & CSS 三角關係)

先來看看這張圖 各位看出什麼了嗎? CSS 大部份人都不陌生,如果是有在摸索網頁或有在寫BLOG的朋友們,多多少少已經碰過啦 SASS & SCSS...

鐵人賽 Modern Web DAY 4

達標好文 技術 VSCode - 好用插件 feat. 開發小技巧

VSCode 吸引人的原因除了本身內建的功能相當多,VSCode 能夠安裝的插件也是又多又好用又方便呀~使用插件可以更有品質或是更快速的進行開發,前一篇為大家介...