iT邦幫忙

scss相關文章
共有 58 則文章

技術 菜雞SCSS初體驗

還記得前兩週我都在學習如何手刻RWD網頁,不只有許多的HTML結構要去注意。 就連CSS樣式也希望能使用模組化的方式建構。 總之,就是要讓code不要太冗長不好...

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

技術 Vue.js - 使用 StyleLint 來整理 CSS 吧!

繼上次的 ESLint 後,這次要來介紹的是 StyleLint,那就廢話不多說開始吧! StyleLint StyleLint 一個檢查 CSS Coding...

鐵人賽 Modern Web DAY 11

技術 SASS/SCSS 簡介

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

鐵人賽 Modern Web DAY 6

技術 DAY6-寫CSS很痛苦嗎?SCSS快速入門介紹

寫CSS最痛苦的事情是什麼? 介紹SCSS之前,先想想寫CSS最痛苦的地方是什麼? 寫法很囉唆 不容易維護 例如以下這個例子 div { color: #...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 了解 WordPress 的 CSS 編碼標準及 SCSS/Sass

大家好,我是 Eric。 我們今天來到了 CSS 篇章的最後一部份,關於 CSS 的編碼標準及 SCSS/Sass。如同我們在 HTML 的編碼標準裡提到的,這...

技術 鐵人12前哨站 - webpack 與 sass 的結合

今天,我們要先將 scss 導入專案中,scss 是 css 的預處理器,可以使我們將樣式做許多管理,首先,我們需要將 scss 下載下來,輸入指令 npm i...

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

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

技術 旅館預約服務練習紀錄-訂房頁面練習

這次來要來寫上面的練習,訂房頁面會有的畫面。 先記錄左邊步驟,要寫下方畫面 HTML <div class="room__price&qu...

技術 旅館預約服務練習紀錄-首頁練習

前言 這次找了 The F2E 前端修練時光屋 的稿件,找到了這份稿件(如果您有興趣,可以再找自己喜歡的設計稿來練功)。 其實原本滿逃避面對這件事情,因為對於...

技術 讓我們站在巨人的肩膀上,如何在專案中導入 Bootstrap 4 並客製它

程式設計的世界有一句俗話叫做,不要重複造輪子,意思就是說,別人已經寫好了的程式,就不要再自己重複寫了,除非是想要練習,想要了解原理,讓自己將來也有機會為別人造...

技術 如何用 Sass 實現類似 Bootstrap 4 的格線系統

★ 首先這篇文章適合以下背景的人閱讀: 1.大概了解什麼是格線系統,甚至有用過 2.有使用過 Sass 管理及撰寫 CSS,並且對基礎 Sass 語法 (SC...

技術 關於購物車頁面的 RWD 移動概念

鐵人賽結束了,但說過了寫文章是 to be continued 的,今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。 回歸正常學習進度,檢視了一下作業...

鐵人賽 Modern Web DAY 29

技術 Day28 | 最強聯名款 TSX 上市-SCSS 篇

前言 本篇進入到導入 SCSS,但因為 TypeScript 的特性,導致 SCSS 還要再經過一層封裝,才有辦法被讀到 .tsx 中,詳細做法會在文中說明!...

技術 旅館預約服務練習紀錄-Bootstrap 4 + Scss

繼鐵人賽後,想把自己再推前進一點, 在 30 天的陶冶後,發現每天撥一點時間思考與撰寫程式,可以提升對於程式的熟悉感, 並可以爬梳自己所理解的東西,就算可能當下...

技術 SASS 學習紀錄 -命名設計小試身手練習

這次的練習是用 SMASS 跟 OOCSS 還有 BEM 的概念來練習, 要呈現是下方的畫面 但我覺得有點單調,所以我就把它優化了變成這樣 HTML 本身不...

鐵人賽 自我挑戰組 DAY 20
網頁學習紀錄 系列 第 20

技術 鐵人賽 Day20 向 KKBOX致敬-嵌入 youtube 連結

音樂網頁一定要有影音可以聽,這次來分享怎麼把 youtube 影片嵌入網頁中, 預計畫面如下: 看起來好像很難,是不是要寫什麼播放語法,還是怎麼寫入影片啊.....

鐵人賽 自我挑戰組 DAY 19
網頁學習紀錄 系列 第 19

技術 鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表

ul li 列表寫法用途真的很廣泛,能呈現的方式也非常多。 想要呈現的方式如下: HTML 程式碼如下 <div class="pref...

鐵人賽 自我挑戰組 DAY 18
網頁學習紀錄 系列 第 18

技術 鐵人賽 Day18-向 KKBOX 致敬!用 ul li 寫一個新聞欄位!

這次要寫一個新聞欄位,是用 ul li 做成的圖文並茂,標題為連結,可以點擊的樣式 畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到,只是內容...