Modular CSS with Sass in Cascade Server
•Transferir como PPTX, PDF•
1 gostou•1,028 visualizações
Demonstration of using Sass (SCSS) and Web Services to update CSS files in Cascade Server. Code available at https://github.com/ericepps/Cascade-Server-SCSS
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Último
Último (20)
Modular CSS with Sass in Cascade Server
- 1. Oh No You Di’int: Modular CSS with Sass in Cascade Server Eric L. Epps @ericepps
- 2. Overview Why to use Sass (SCSS syntax) Modular Sass Managing (S)CSS in Cascade Server Code!
- 4. Why SASS? Variables Nesting Mixins Extend/Inheritance Operators Partials/Import
- 5. Why SASS? Variables http://sass-lang.com/guide
- 6. Why SASS? Nesting http://sass-lang.com/guide
- 7. Why SASS? Mixins http://sass-lang.com/guide
- 8. Why SASS? Extend/Inheritance http://sass-lang.com/guide
- 9. Why SASS? Operators http://sass-lang.com/guide
- 10. Why SASS? Partials/Import http://sass-lang.com/guide
- 12. Requirements Compile SCSS Modular for content re-use Minify CSS Easily publish changes In Cascade Server
- 13. Modules Code Rendered SCSS Page SCSS Site PHP Compile SCSS Minify CSS Cascade Web Services Target Site CSS File Pages Website
- 14. Links https://github.com/ericepps/Cascade- Server-SCSS @ericepps eric.epps@svcc.edu
Notas do Editor
- Hello, my name is Eric Epps, and this is “Oh No You Di’int: Modular CSS with Sass in Cascade Server.” To start, I just want to take a quick poll: How many are using Sass already? Hello, my name is Eric Epps, and this is “Oh No You Di’int: Modular CSS with Sass in Cascade Server.” To start, I just want to take a quick poll: How many are using Sass already?
- OK, then, what we’re going to cover today is a brief overview of Sass and how it can make your life a little bit easier. As a side note, I’ll be using the SCSS syntax. I think it’s easier to get started that way, since your existing CSS files are valid SCSS. Then we’ll look at making your Sass code modular. Finally, I’ll demonstrate the system I’ve developed for managing Sass and CSS stylesheets in Cascade Server and release the code for you to check out.
- All right, then, let’s get started! I remember how excited I was when I first heard about CSS. You mean I don’t have to use a font tag in every cell of this table? I can just define my styles once for the whole site? I’m in! This is a pretty tame example, but it was from one of the first sites I worked on; I was able to pull the old code from the Wayback Machine.
- But, after a while, as CSS got more advanced and my code got more and more complex, some of that excitement started to turn to frustration. Why do I have to type all this out? I have to look through HOW MANY lines of code to make this one little change? So, finally, after hearing about how amazing LESS and Sass are, I decided to give it a try. Here’s a brief overview of what Sass allows you to do. We’ll look at Variables, Nesting, Mixins, Extensions & Inheritance, Operators, and Partials & Imports. I’m pulling all these examples directly from the Sass website, which goes into more detail as well.
- Variables are really useful, for example, when you want to define a color palette to reuse throughout a site or, as this sample demonstrates, fonts. You can define the variable and then reference that variable in your style sheet. So, when it’s time to update your colors or fonts or whatever, you only have to change it once.
- Nesting is one of my favorite features. It makes for much cleaner code by allowing selectors to be nested inside parents. When it’s parsed, it will append all the parent selectors, but I find it to be much easier to organize code this way.
- Mixins work kind of like a function. They’re especially useful for vendor prefixes, allowing you to use one definition for several.
- Extensions, or inheritance, allows for one rule to include other rules and then add or modify a couple things. For example, if you have an alert box that could be different colors, you don’t have to assign two classes or retype the rule multiple times, you can just extend the first rule to add or modify the rule.
- Operators make math easier. By mixing for example fluid and relative units, you can make the Sass processor do that work for you. You can also do some of this directly in your CSS with calc() in CSS3.
- Finally, with partials and import, you can create smaller SCSS files and include them in your main file. Since the imports are handled by the preprocessor, you don’t have the added latency of loading several CSS files in your page but you can break your code up into more manageable chunks—modules—and use them as building blocks to build, mix and match, your CSS file.
- So now, we’re to Modular CSS using SASS. You can, like my kids’ latest obsession, LEGO, use these modules as building blocks to build your CSS file. In Sass, you can name the files starting with an underscore, and then you can include them just by typing the file name without the underscore or the .scss, saving you from typing those 6 extra characters. Think of the time you’ll save! For a while, I used Koala for a compiler and uploaded the compiled CSS file into Cascade. Which worked pretty well. But I effectively had two code bases. If I made a quick change to the CSS file in Cascade, I’d need to remember to open it on my computer and edit the file there as well. I wanted a better solution, and one that was in Cascade Server. Jason Aller has another solution he presented last year using Grunt, but I just wanted to take a different approach and use some of the tools in Cascade.
- So here are the requirements I set for myself. Obviously, I wanted it to be able to compile the SCSS. I also wanted to be able to use SCSS modules so I could mix-and-match them for my CSS files. I also thought it would be nice to be able to minify the CSS while I’m at it. I wanted to be able to easily publish changes all from one location. And I wanted it to be all managed inside Cascade Server, in one code base.
- First let’s look at a diagram of how it works, and then we’ll dive into a demo. I set up all the SCSS in a separate site, to keep it central. In that site, there are modules (which are just file assets), which can be combined with some additional CSS code in a Page with a Data Definition. All of that content is combined and rendered in the Layout pane as a form. This form posts to a PHP script which is going to process the SCSS code, compile it, minify it, update the target CSS file asset with the compiled CSS, and publish the target CSS. What’s great then, is that these assets are all linked in the Relationships tab. If I look at a target CSS file, I can see what SCSS page is linked. Or I can see what pages use a specific module or vice-versa.