![]() See explanation here +text-shadow(#rgba(0, 0, 0, 0.5) 0 1px 1px) See explanation here +background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa)) See explanation here +border-radius(5px) These make things super easy for frontender, here is a simple example below:ĭisplay: inline-block padding: 10px color: white background: black OK, now the exciting news - one of the major reasons why you should pick Sass: Compass!Ĭompass provides cross browser CSS3 mixins, basic mixins for common typography patterns, and basic mixins for common styling patterns. * Control Directives are really amazing! See figure below as an example. I would suggest to start reading about and Control Directives. The wisest thing to do now is to go here and dive into Sass a bit. * imagine me patting each one of you on the back * */ line-height: 2.5em color: $fontColorĬongratulation! now you are officially using Sass! */ font-size: 0.625em /* The leading is now 25 pixels. $titleFont: 'Coustard', cursive, Georgia, serifįont-family: $fontFamily /* The font-size is now 0.625 * 16px = 10px. =retina-image($image, $ext, $resolution, $properties: false)īackground: url(./images/#) $properties background-size: $resolution ![]() It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin. Mixins are defined with the "=") directive. Now, let's setup basic Sass for a project. * Make sure you already created a sass file inside your sass folder, otherwise you will see error message on terminal when you type "compass watch" * Example, using my Sassify! project BAM! Compass is compiling your Sass files. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing -syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R -from scss -to sass sass scss & rm -rf sass & mv scss sassĪfter adding config.rb on your project, go to Terminal => project folder => type "compass watch". Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. # To enable relative paths to assets via compass helper functions. # Set this to the root of your project when deployed: Then paste the code below on config.rb(please adjust accordingly to your project structure): # Require any additional compass plugins here. See below: Project structure for Sassify! All you have to do is adding config.rb on your project folder. Using Compass is slightly different, but equally easy. Everything is straight forward: add desired projects on the left(1), configure it on the right(2), and click "Log" on top right to see console messages(3). Using Scout App is super easy, all you have to do is go to their website and download the app. * I personally use Compass because it is easier for me and I don't have to install any app on my mac however I would recommend Scout for people who prefer easy UI(Sass & Compass) - and CodeKit for people who are not only using Sass & Compass but also Haml, CoffeeScript, etc.* ![]() And many other sizzle out there (that I haven't tried).They also have a livereload feature, super handy. It's not only compiling Sass & Compass but also Haml, Less, Stylus, Jade, & CoffeeScript. CodeKit - an amazing tool for developers.I assure you this will be super easy and quick, let's do it now.įirst things first, let's decide on the compiler. So you are convinced and want to try Sass now. One of the best explanations I really like is from Chris Coyier. I am not planning on explaining the difference here, since there are many other experienced developer out there blogging about this topic. So here is the truth indeed Less has what Sass has(mixin, extend, you-name-it), but the way Less work is different than Sass. I would like to persuade them to take a peek a bit on Sass two of the main reasons are because of Compass & also. Most developers I met are on Less' side and There are a lot of discussions going on about Sass vs. I am planning on writing more about how to use them in the future, but not in this version. Please keep in mind that this article only covers real basic of Sass & Compass for Sass newbies. Yes, you will have a project running Sass within the next 10 to 15 minutes. The main goal of this article is to guide frontenders who are interested in using Sass NOW. Lighthouse scores are updated daily.Most frontenders heard bout Sass some got hooked, many chose Less, and majority stucks with overload informations about how awesome it is, but have no clue in how to start using it on their projects. Community contributions are shown in random order.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |