with Sphero, creating cool things for connecting robots to the internet Worked on several interesting web projects with Pebble Current maintainer of the TextMate SCSS Bundle for syntax highlighting with support for Atom and Sublime | @ecanals www.enriquecanals.com
CSS basics and shortcomings What are CSS pre-processors How pre-processors work and don't work PART 2 Which one do I use? (Sass, Less, Stylus) Workflow Integration Using pre-processors in WordPress theme development
h t m l , b o d y { w i d t h : 1 0 0 % ; h e i g h t : 1 0 0 % ; o v e r f l o w : h i d d e n ; } b o d y { b a c k g r o u n d - c o l o r : # f f f ; c o l o r : # 0 0 0 ; l i n e - h e i g h t : 1 ; p o s i t i o n : r e l a t i v e ; } Simple enough.
e a l . s l i d e s e c t i o n , . r e v e a l . l i n e a r s e c t i o n { - w e b k i t - b a c k f a c e - v i s i b i l i t y : h i d d e n ; b a c k f a c e - v i s i b i l i t y : h i d d e n ; } . r e v e a l . s l i d e s > s e c t i o n [ d a t a - t r a n s i t i o n = s l i d e ] . p a s t , . r e v e a l . s l i d e . s l i d e s > s e c t i o n : n o t ( [ d a t a - t r a n s i t i o n ] - w e b k i t - t r a n s f o r m : t r a n s l a t e ( - 1 5 0 % , 0 ) ; - m s - t r a n s f o r m : t r a n s l a t e ( - 1 5 0 % , 0 ) ; t r a n s f o r m : t r a n s l a t e ( - 1 5 0 % , 0 ) ; } . r e v e a l . s l i d e s > s e c t i o n [ d a t a - t r a n s i t i o n = s l i d e ] . f u t u r e , . r e v e a l . s l i d e . s l i d e s > s e c t i o n : n o t ( [ d a t a - t r a n s i t i o n ] - w e b k i t - t r a n s f o r m : t r a n s l a t e ( 1 5 0 % , 0 ) ; - m s - t r a n s f o r m : t r a n s l a t e ( 1 5 0 % , 0 ) ; t r a n s f o r m : t r a n s l a t e ( 1 5 0 % , 0 ) ; } . r e v e a l . s l i d e s > s e c t i o n > s e c t i o n [ d a t a - t r a n s i t i o n = s l i d e ] . p a s t , . r e v e a l . s l i d e . s l i d e s > s e c t i o n > s e c t i o n - w e b k i t - t r a n s f o r m : t r a n s l a t e ( 0 , - 1 5 0 % ) ; - m s - t r a n s f o r m : t r a n s l a t e ( 0 , - 1 5 0 % ) ; t r a n s f o r m : t r a n s l a t e ( 0 , - 1 5 0 % ) ; } . r e v e a l . s l i d e s > s e c t i o n > s e c t i o n [ d a t a - t r a n s i t i o n = s l i d e ] . f u t u r e , . r e v e a l . s l i d e . s l i d e s > s e c t i o n > s e c t i o n - w e b k i t - t r a n s f o r m : t r a n s l a t e ( 0 , 1 5 0 % ) ; - m s - t r a n s f o r m : t r a n s l a t e ( 0 , 1 5 0 % ) ; t r a n s f o r m : t r a n s l a t e ( 0 , 1 5 0 % ) ; } You can see how this get's ugly fast.
code, as CSS variables are still not supported in all browsers. Working with multiple CSS files means you're dependent on using @ i m p o r t to import rules from other stylesheets Bad for performance Requires making additional HTTP requests If you're NOT writing CSS in multiple files...
all of these features. The differences between them are not significant enough to make an argument for one over the other; it's a matter of preference. None of these features add to or enhance CSS in anyway, they simply improve the development workflow for writing CSS.
{ . h e r o - b u t t o n { & : h o v e r { } } } . h e r o { } . h e r o . h e r o - b u t t o n { } . h e r o . h e r o - b u t t o n : h o v e r { }
i c { f o n t - f a m i l y : ' A r i a l ' , s a n s - s e r i f ; p a d d i n g : 0 ; s e c t i o n { m i n - h e i g h t : 5 4 e m ; . h e r o - t e x t { t e x t - a l i g n : c e n t e r ; h 3 { c o l o r : # 0 6 9 3 c 9 ; f o n t - s i z e : 3 e m ; t e x t - t r a n s f o r m : u p p e r c a s e ; } p { f o n t - s i z e : 1 . 5 e m } } } } . s t a t i c { f o n t - f a m i l y : ' A r i a l ' , s a n s - s e r i f ; p a d d i n g : 0 ; } . s t a t i c s e c t i o n { m i n - h e i g h t : 5 4 e m ; } . s t a t i c s e c t i o n . h e r o - t e x t { t e x t - a l i g n : c e n t e r ; } . s t a t i c s e c t i o n . h e r o - t e x t h 3 { f o n t - s i z e : 3 e m ; t e x t - t r a n s f o r m : u p p e r c a s e ; c o l o r : # 0 6 9 3 c 9 ; } . s t a t i c s e c t i o n . h e r o - t e x t p { f o n t - s i z e : 1 . 5 e m ; } Protip: don't nest too much. Max. 4 levels.
as needed in your code. $ c o o l _ o r a n g e : # E 2 9 9 1 F ; $ m a i n _ c o l o r : $ c o o l _ o r a n g e ; h 4 { c o l o r : $ m a i n _ c o l o r ; }
$ h e a d i n g F o n t : ' L e a g u e G o t h i c ' , I m p a c t , s a n s - s e r i f ; $ h e a d i n g C o l o r : # e e e ; $ h e a d i n g L i n e H e i g h t : 1 . 2 ; $ h e a d i n g L e t t e r S p a c i n g : n o r m a l ; $ h e a d i n g T e x t T r a n s f o r m : u p p e r c a s e ; $ h e a d i n g T e x t S h a d o w : n o n e ; $ h e a d i n g F o n t W e i g h t : n o r m a l ; $ h e a d i n g 1 T e x t S h a d o w : $ h e a d i n g T e x t S h a d o w ; These are variables used for this presentation.
@ m i x i n r a d i a l - g r a d i e n t ( $ o u t e r , $ i n n e r , $ t y p e : c i r c l e ) { b a c k g r o u n d : $ o u t e r ; b a c k g r o u n d : - m o z - r a d i a l - g r a d i e n t ( c e n t e r , $ t y p e c o v e r , $ i n n e r 0 % , $ o u t e r 1 0 0 % ) ; b a c k g r o u n d : - w e b k i t - g r a d i e n t ( r a d i a l , c e n t e r c e n t e r , 0 p x , c e n t e r c e n t e r , 1 0 0 % , c o l o r - s t o p ( 0 % , $ i n n e r ) , c o l o r - s t o p b a c k g r o u n d : - w e b k i t - r a d i a l - g r a d i e n t ( c e n t e r , $ t y p e c o v e r , $ i n n e r 0 % , $ o u t e r 1 0 0 % ) ; b a c k g r o u n d : - o - r a d i a l - g r a d i e n t ( c e n t e r , $ t y p e c o v e r , $ i n n e r 0 % , $ o u t e r 1 0 0 % ) ; b a c k g r o u n d : - m s - r a d i a l - g r a d i e n t ( c e n t e r , $ t y p e c o v e r , $ i n n e r 0 % , $ o u t e r 1 0 0 % ) ; b a c k g r o u n d : r a d i a l - g r a d i e n t ( c e n t e r , $ t y p e c o v e r , $ i n n e r 0 % , $ o u t e r 1 0 0 % ) ; } . r a d i a l - b a c k g r o u n d { @ i n c l u d e r a d i a l - g r a d i e n t ( # a d d 9 e 4 , # f 7 f b f c ) ; }
c k _ o r a n g e : s a t u r a t e ( $ c o o l _ o r a n g e , 5 0 % ) ; $ l i g h t _ o r a n g e : l i g h t e n ( $ c o o l _ o r a n g e , 1 0 % ) ; $ n o t _ o r a n g e : i n v e r t ( $ c o o l _ o r a n g e ) ; $ d a r k _ o r a n g e : d a r k e n ( $ c o o l _ o r a n g e , 2 5 % ) ; w i d t h : 3 6 0 p x * 3 / 6 p x ; / * = 1 8 0 p x * / . s m a l l - i m a g e { w i d t h : $ i m g W i d t h / 2 ; }
i m p o r t " . . / t e m p l a t e / m i x i n s " ; @ i m p o r t " . . / t e m p l a t e / m o d u l e s " ; @ i m p o r t u r l ( h t t p s : / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = Q u i c k s a n d : 4 0 0 , 7 0 0 , 4 0 0 @ i m p o r t u r l ( h t t p s : / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = O p e n + S a n s : 4 0 0 i t a l i c , 7 0 0
more managable files that can then be used inside of other Sass files. Files prefixed with an underscore (i.e. _ p a r t i a l . s c s s ) are regarded as partials and are not generated into a CSS file. Partials are used with the @ i m p o r t directive. c s s / b a s e . s c s s s c s s / b a s e / _ c o l o r s . s c s s _ m i x i n s . s c s s _ r e s e t . s c s s l a y o u t / _ g r i d @ i m p o r t ' r e s e t ' @ i m p o r t ' m i x i n s ' @ i m p o r t ' c o l o r s '
Agreed. CSS pre-processors are meant to be used as build tools that run in your development environment. There's no need to add anything to your web server in order for you to use it.
TO USE A PRE-PROCESSOR?" No. But you will need to have them installed on your workstation in order to use them. Sass is written in Ruby. Less and Stylus are written in Javascript. Installing both is easy on Windows, Linux and OS X.
and Stylus all provide the same features. Each has it's own unique way of accomplishing the same task. It all comes down to personal preference, so try all of them and make your own decision on what's best.
of doing things. If you're into Ruby, Sass might be your thing. If you're into Javascript, Less or Stylus might be better too. See what works best for you.
m i n s t a l l c o m p a s s > c o m p a s s c r e a t e n e w - p r o j e c t > c o m p a s s w a t c h Sass is included as a dependency in the c o m p a s s gem
k - s m a l l : 3 2 0 p x ; $ b r e a k - l a r g e : 1 2 0 0 p x ; . p r o f i l e - p i c { f l o a t : l e f t ; w i d t h : 2 5 0 p x ; @ m e d i a s c r e e n a n d ( m a x - w i d t h : $ b r e a k - s m a l l ) { w i d t h : 1 0 0 p x ; f l o a t : n o n e ; } @ m e d i a s c r e e n a n d ( m i n - w i d t h : $ b r e a k - l a r g e ) { f l o a t : r i g h t ; } }
@ b a s e : # 6 6 3 3 3 3 ; @ l i g h t e r 1 : l i g h t e n ( s p i n ( @ b a s e , 5 ) , 1 0 % ) ; @ l i g h t e r 2 : l i g h t e n ( s p i n ( @ b a s e , 1 0 ) , 2 0 % ) ; @ d a r k e r 1 : d a r k e n ( s p i n ( @ b a s e , - 5 ) , 1 0 % ) ; @ d a r k e r 2 : d a r k e n ( s p i n ( @ b a s e , - 1 0 ) , 2 0 % ) ; . o n e { c o l o r : @ b a s e ; } . t w o { c o l o r : @ l i g h t e r 1 ; } . t h r e e { c o l o r : @ l i g h t e r 2 ; } . f o u r { c o l o r : @ d a r k e r 1 ; } . f i v e { c o l o r : @ d a r k e r 2 ; } . o n e { c o l o r : # 6 6 3 3 3 3 ; } . t w o { c o l o r : # 8 8 4 a 4 4 ; } . t h r e e { c o l o r : # a a 6 3 5 5 ; } . f o u r { c o l o r : # 4 4 2 2 2 5 ; } . f i v e { c o l o r : # 4 4 2 2 2 5 ; }
n t - s i z e : ( 1 8 p x / $ c o n t e x t ) * 1 e m / / 1 . 1 2 5 e m $ p a g e - w i d t h : 1 0 2 4 p x ; . c o n t a i n e r { w i d t h : p e r c e n t a g e ( 2 0 0 p x / $ p a g e - w i d t h ) ; m a r g i n : p e r c e n t a g e ( 1 5 p x / $ p a g e - w i d t h ) ; }
by WordPress' naming and style conventions. There must be a s t y l e . c s s file with the appropriate comments at the top of the file. / * T h e m e N a m e : M y T h e m e T h e m e U R I : h t t p : / / e x a m p l e . c o m D e s c r i p t i o n : M y c o o l n e w s i t e . A u t h o r : E n r i q u e C a n a l s A u t h o r U R I : e n r i q u e c a n a l s . V e r s i o n : 1 . 0 * /
which provides compiling and configuration options for writing Sass for your WordPress themes. Source is also available on GitHub: WP-SCSS https://github.com/ConnectThink/WP-SCSS
MENTIONED HERE: Natalie Weizenbaum & Hampton Catlin (Sass) TJ Holowaychuk (Stylus) Alexis Sellier (Less) Chris Eppstein (Compass) Mario Ricalde (TextMate SCSS Bundle) Hakim El Hattab for Reveal.js (how this presentation was made) Many more not mentioned...
hanayo04
thejetblueairhelpsupport
nahokoxxx
mk2taiga
ryomaru0825
harukasakihara
moritamasami
sophiakunii
tk3fftk
flyaahelpguide
tkikuchi
rlifchitz
akosma
thoeni
jakevdp
kneath
danielanewman
davidbonilla
rocio
bryan
zakiyama
sergeychernyshev
honnibal
addyosmani
