iT邦幫忙

sass相關文章
共有 144 則文章

技術 格線系統(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

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

技術 CSS 命名基礎介紹 DAY40

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

技術 OOCSS 基礎介紹 DAY39

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

技術 Sass/Css Smacss模組化 DAY38

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

技術 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:...

技術 Sass @mixin DAY35

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

技術 Sass @import DAY34

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

技術 Sass 變數 與 darken , lighten DAY33

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

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

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

技術 Sass 基礎教學 DAY31

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

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

技術 總結 DAY30 耶 成功啦~~

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

鐵人賽 Software Development DAY 28

技術 誰說低代碼平台上就不能寫自己的CSS

都已經千辛萬苦的學會CSS了,不用用這個技能不是就太浪費了嗎? 對,本篇文就是要來看看怎麼在低代碼平台上用CSS。 工具 好用的IDE (我用Visual S...

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 11

技術 SASS/SCSS 簡介

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

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

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

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

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

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

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

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

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

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

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

技術 Scss - 基礎功能介紹

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

技術 Sass 學習筆記

Variable $variablename: value define all global variables in "_globals.sa...

鐵人賽 自我挑戰組 DAY 23

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

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

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

技術 過度依賴前置處理器

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12

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

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