If anyone is using Sass, Less or other scss I would love to hear your thoughts on it. For example, I can see the advantages of using variables and mixins but I have a few concerns as to whether this saves any time. If a client want to change a color in the CSS file, it would be convenient to just change a variable unless the client only wanted to change the color of certain parts of the site. Also, is it worth it to learn a new language to save yourself a little bit of typing? The examples I have seen seem to be longer and more confusing when done in scss than regular CSS. Previously I have been using php to create dynamic css but I've been looking into using scss.
I used LESS for one of my projects, and only one of my projects! Personally, I found that it created extra steps and I was spending more time for little changes than I was getting from it. It's a great idea, but just not for me. Things like changing colour variables can be easily achieved by a global find and replace in any good editor - many of the benefits it's meant to bring can be achieved in other ways, without having to learn something new. A no from me
Tickedon, you bring up a good point with the global find and replace. There are two ways to do that in most code editors, what I call "Butcher" and "Surgeon". With the butcher method I enter the find and replace with value and just click the button to replace all occurrences. With the surgeon method, I enter the find value and click through each occurrence, only changing the ones I need. The problem I see with using variables in scss is that it only allows you to change colors using a butcher approach (replace ALL).
To me these types of 'tools' or 'additions' to CSS is just a waste of time. If you have enough CSS where something like "LESS" makes a difference, there is likely something horrifically wrong with how your page is built. But then, an ENTIRE forum software shouldn't need more than 48k of CSS -- and those are the largest of projects. People crapping out hundreds upon hundreds of K of CSS through broken practices, redundant declarations, lack of condensed properties, throwing classes at EVERYTHING for no good reason, multiple classes on elements that shouldn't need any, and a complete lack of understanding the purpose of semantic markup, separation of presentation from content, and the "cascading" part of "Cascading Style Sheets" Alongside all the other framework asshattery like jQuery, Mootools, YUI, Blueprint, Foundation, etc,etc... they're all just bloat to cover up outdated methodologies, a failure to grasp the core concepts, and just plain ineptitude. They take something simple (accessible layout) and piss all over it from orbit. If you find ANY advantage to using them, there is likely something wrong with your markup, wrong with your CSS, or wrong with your thinking. For example if you see nothing wrong with markup like this: <body class="home blog custom-background"> <div id="wrapper"> <header id="header"> <h1 id="site-title"> Code (markup): Then you're already into herpaderp territory on the markup.
Foundation is built with Less (that just seems like a play on words since it's actually built with more css than it needs).
My current contract we are using SASS to build layouts. It's actually a really handy bit of kit for building templates into a CMS as you can assign variables for certain fonts, colours etc and then easily change them for the whole site. I think for a small website it's not worth the hassle. Here's an example of what my base file would be like. (Please note I'm working off other people's code) /* colours */ $bg: #fff; $fn: #000; $bg_pri: #E10119; //#4d960d; // green $fn_pri: #FFF; $bg_sec: #000; // grey $fn_sec: #FFF; $bg_thi: #000; // white $fn_thi: #fff; /* /colours */ /* screen sizes */ // small screens 200-300px $small_phone_min: 200px; $small_phone_max: 300px; // iphone size $med_phone_min: 300px; $med_phone_max: 320px; // small tablet $small_tablet_min: 440px; $small_tablet_max: 480px; // tablet portrait $tablet_portrait_min: 700px; // tablet landscape $tablet_landscape_min: 1000px; /* /screen sizes */ @mixin border($n) { -webkit-border-radius: $n; -moz-border-radius: $n; -ms-border-radius: $n; -o-border-radius: $n; border-radius: $n; } @mixin borderdetail($a,$b,$c,$d) { -webkit-border-radius: $a $b $c $d; -moz-border-radius: $a $b $c $d; -ms-border-radius: $a $b $c $d; -o-border-radius: $a $b $c $d; border-radius: $a $b $c $d; } @mixin boxshadow($x, $y, $blur, $size, $col) { -webkit-box-shadow: $x $y $blur $size $col; -moz-box-shadow: $x $y $blur $size $col; -ms-box-shadow: $x $y $blur $size $col; -o-box-shadow: $x $y $blur $size $col; box-shadow: $x $y $blur $size $col; } @mixin lineargradV($colorone, $colortwo) { background-color: $colorone ; background-image: -webkit-linear-gradient(top, $colorone, $colortwo ) ; background-image: -moz-linear-gradient(top, $colorone, $colortwo ) ; background-image: -ms-linear-gradient(top, $colorone, $colortwo ) ; background-image: -o-linear-gradient(top, $colorone, $colortwo ) ; background-image: linear-gradient(top, $colorone, $colortwo ) ; } @mixin transition($time) { -webkit-transition: all $time ease-out; -moz-transition: all $time ease-out; -ms-transition: all $time ease-out; -o-transition: all $time ease-out; transition: all $time ease-out; } /************************************* * * Includes * **************************************/ @[USER=157350]import[/USER] "./includes/basic"; @[USER=157350]import[/USER] "./includes/header"; @[USER=157350]import[/USER] "./includes/nav"; @[USER=157350]import[/USER] "./includes/login"; @[USER=157350]import[/USER] "./includes/content"; @[USER=157350]import[/USER] "./includes/footer"; @[USER=157350]import[/USER] "./includes/advertisement"; @[USER=157350]import[/USER] "./includes/tables"; @[USER=157350]import[/USER] "./includes/modules"; @[USER=157350]import[/USER] "./includes/modal"; @[USER=157350]import[/USER] "./includes/overwrites"; Code (markup):
The "includes" feature is something that I thought would be nice so you could have several style sheets with a few hundred lines as opposed to one with several thousand. Then again, you could do that with vanilla css and just bring in the sheets you need on each HTML page. I wouldn't even consider using it for a small website, I'm wondering if it's worth the hassle on large projects. One of the biggest hurdles I found was the lack of documentation. If you are completely new to SCSS, you really have to learn by trial and error. There's a big need for a good (basic) tutorial.