[情報] css救星 RGBA續上週介紹compass進階功能

看板Web_Design作者evenwu (EvenWu)時間15年前 (2011/06/05 18:17)推噓7(7推 0噓 14→)

留言21則, 4人參與討論串1/1

本週RGBA又來了報名網址 http://registrano.com/events/rgba-2011-06-08 這一次我們還是想要繼續上週的compass簡介 compass 是啥？ compass 是免費的 opensource http://compass-style.org 它建立了一層抽象環境，讓你在撰寫 css 網頁排版的時候，減少以往必須靠各種撇步整理 css 語法邏輯，以及內含許多 ie 問題的解決方案，使用 compass 做 css 排版會讓你事半功倍！ compass.app 是啥？ compass.app 是一套GUI介面的compass工具軟體，由和多開發設計師透過compass.app可以降低門檻，無痛進入compass美好世界但是這是付費軟體，要USD7（大概是...NTD200出頭） http://compass.handlino.com 推廣這個東西只是我的熱血... 賣幾套跟我無關XD 附帶一提這官網拍的screencast真的很爛，要搞懂還是來RGBA比較快 = = = 上週的RGBA來了非常多對compass有興趣的網頁設計師非常感謝大家的支持... 回顧一下上週介紹的compass內容 - compass.app 環境 - 編譯css的各種設定方式 - scss的巢狀寫法 - import partial, scss 管理 @import "mobile"; -> _mobile.scss _mobile.scss 不會產生 mobile.css - import compass 引入 compass 內建功能 @import "compass/reset"; @import "compass"; - 使用 compass 內建功能 @include link-colors(red,black); @include hover-link; @include border-radius(5px); @include box-shadow(3px 3px 5px rgba(0,0,0,.3)); - 定義變數 $brand-color: #a00; - 顏色計算函式 color: darken($brand-color, 10%); color: lighten($brand-color, 10%); = = = 回顧後才發現好像有些重量級的使用並沒有講到因此本週一定要繼續把更棒的功能講一講例如 @mixin 使用與建立 @extend 用法介紹 @mixing & @extend 與設計方法論 compass extension 簡介這些工具搭配起來，你的案子即可能在5分鐘內結束而且完全不用擔心有任何的ie bug （上次我全程是使用Live Demo的方式示範，大家應該有體會到XD）報名網址 http://registrano.com/events/rgba-2011-06-08 RGBA的慣例都是週日晚上12:00整開始報名請有興趣的人把握機會啦 -- RGBA網頁設計師聚會 — 一群網頁設計師發起的交流聚會，隨意聊天問問題的好地方 http://rgba.tumblr.com/post/356284580/about EvenDesign意門設計 — 專門提供網站開發者跨平台、能安心整合的標準規格網頁設計 http://evendesign.tw -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.34.100.58

→

oj113068

06/05 20:18, , 1^F

06/05 20:18, 1^F

→

oj113068

06/05 20:18, , 2^F

06/05 20:18, 2^F

→

evenwu

06/05 22:24, , 3^F

06/05 22:24, 3^F