Creating your styles withSass Maps

View Github Repository Open presentation in a new window

loumontano

See all presentation from loumontano

Creating your styles withSass Maps

0 0

sassconf-maps

Sass Conf 2015 Maps Talk

On Github loumontano / sassconf-maps

Creating your styles withSass Maps

Lourdes Montano | SassConf 2015 | Austin, TX

//Hi! Thank you for coming //My 1st time in Austin :) This is creating your styles with Sass Maps I'm going to talk about what I've been learning this year

Hi! I’m Lourdes

Front-End Developer @ R/GA Buenos Aires

@loumontano

- Day to day includes working with responsive HTML CSS JS

big scale / long term projects

- Websites with tons of visits / users - Large teams in different cities / countries - Big and strong architecture - Communication is very important - At the beggining of the year I worked on a big project

Lots of changes...all the time

Interaction with Designers

Developers

The client

- The client wasn't sure about the design direction - Change stuff twice a day, and very quick

Seriously...

A BAZILLION CHANGES

and then going back to the first option

all the time…

- This was affecting code quality and performance - A code refactor was needed because so many changes made the code not clean - I used to save old code snippets bc I new I had to add them again later

I needed a solution for this

- I was tired and a bit frustated, this was not a good way of working at all - I knew the client wasn't going to change his mind, so I had to find a way to deal with this - I needed an organized solution

"We’re not designing pages, we’re designing systems of components."

Stephen Hay

- We create components, we think on the parts of the site and how they interact between them - Design and architecture is easier this way - Communication between designers and developers improved

you said Maps?

isn't it difficult?

//By that time I started reading about maps and could "kind of" understand how it worked… //Thought that only ‘the chosen ones’ could work with this //We all tell ourselves tricky excuses like ‘I don’t know it perfectly’ or ‘is not fully supported yet' //So let's see how it works!

A map looks like...

- Maps represent an association between keys and values, where keys are used to look up values. - So you have a Name - Key - Value associated to its key - Map keys can be any Sass data type (even another map) - If you've used languages like JavaScript you may know that a Map is sometimes called a Hash. - they have a syntax that is very similar to JSON

...and you call it this way

- For this, we use the map-get function that looks up values in a map - We’re going to pass two parameters to it: the name of the map and then the key. - So I call a map and a key in order to return its value

Key / Value data sets Unique list of keys Access to the keys and values Ability to iterate values

So, all in all maps are this

So, how do I apply this? C'mon, Lou...give me something I can use

//I knew the theory but I didn't find a useful case for my work

Theming with maps

- for example we want to build themes for the categories on my site - And we want to group these theme styles all together inside a map - For each theme we create a map

Theming with maps

- Whenever we want to use a specific theme for a category we create a loop with the @each directive so we can apply the styles for that theme - If we want to change the theme with all its properties, we simply call another map and the loop will take care of applying the new values

Theming with maps

- Here we see the theme styles applied on the computed CSS

Managing color values

- Here we are going to use the ability of map nesting - Let's imagine that we want to create color palettes with some color variations - I create a map called my-colors and inside that map, 2 inner maps with color variation for each one - Like James Steinbach said, is like the movie Inception (check that the totem is still spinning)

Managing color values

- So, we create a function where we add parameters for the color and tone we want to choose - We check that this info exists, we use @debug - And then we return a map-get where we set 2 parameters: the first one, is going to be the map-get function for selecting the map and the color map name, and the second parmeter is going to be the tone. - If we do not set the second parameter when we call the function, will default to 'base' - Check that the totem is still spinning :)

Managing color values

- And finally when creating our styles, we call this function with its color and color variation

FINAL THOUGHTS

Easy to maintain & modify Better code organization Use maps with a purpose Beware those nested maps! Debug!

- The learning curve may be a bit more complex - Use it if it suits for your project. - The best technique is the one that makes you feel more confortable and is more performant for your project.

Thank You! @loumontano http://www.slideshare.net/loumontano/sassconf-maps

Creating your styles withSass Maps Lourdes Montano | SassConf 2015 | Austin, TX //Hi! Thank you for coming //My 1st time in Austin :) This is creating your styles with Sass Maps I'm going to talk about what I've been learning this year