What is Reddit's opinion of Sass?

When your boss says "I'll need less sass mister" was he just being crotchety or did he really just want you to install LESS and SASS modules... I know, total brainfuck, eh?

I just switched to using SASS this year, and haven't looked back. It compiles to css.
All of a sudden css is dynamic and manageable.
You have variables, inheritance, nesting, functions all within css. Really worth checking out.

EDIT: More suggestions for using Sass (I'm on a Mac):
* I've found TextMate is the best editor for Sass syntax highlighting.
* Compass App is great for auto compilation when you save the file, and growl notifications for compilation errors.

CSS can be a biggoh pain in the ass, definitely when you don't fully understand how it works. I've been doing frontend web dev for about a decade and I still get into pickles like you describe. Here's some quick tips that may make your life easier:

The most-specific selector wins, i.e. styles under .foo will be overwritten by the styles of .foo a or #bar. IDs are more-specific than classes.
Add a class to those elements or an ID to their container so you can pinpoint your styles or figure out a more-specific selector.
There's always a solution that works, even if its just using an image and saying "fuck it!" And if you have to sacrifice a bit of user experience on IE7, so be it.

Also, using SASS or LESS can help a ton. I suggest using them, but only after you have a firm grasp on normal CSS. Here's my favorite Windows compiler (less and sass): Prepros.

*Prepos works for OSX too, neat.

CSS is actually fairly shitty when you think about what could easily be fixed/added. I mean, it's great what CSS does and I appreciate it, but 15 years in the making and still no variables?

Unless you need to support it, I suggest sticking to SASS. It does things a lot more straightforward and as a programmer would expect. One example of this is looping:

SASS:

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-directive

LESS:

.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration }

div { .loop(5); // launch the loop }

http://lesscss.org/features/#loops-feature

Source: I maintain templates for all major CSS language variants. SASS/SCSS are the easiest by far. https://github.com/twolfson/spritesheet-templates

That's Sass, not CSS. Sass adds extra functionality to CSS, including using variables. What you see here is a variable in Sass. The output to the browser would be plain CSS.

Sass is more similar to normal mainstream programming languages, whereas Less isn't. E.g. you can write loops as loops instead of recursion and it has a map datatype
Placeholders
Larger community

Webpack is like a factory, in the sense that you enter some raw materials and it returns a product ready to use.

For example let's say you are building a site and you want to use new features of JavaScript and SASS for your styling. Some browsers are already capable of understanding ES6 JavaScript features, but not all of them, and no browser (that I know of) can directly use SASS. So the solution is to compile your files into new ones, ES6 is going to be transformed into ES5 JS (which almost all browser are capable of understanding) and the SASS is going to be transformed to CSS.

The purpose of webpack is precisely that, it acts like a factory with a control room where you can configure what types of files you want to transform, where do they live and where do you want them "outputted".

PS: I wrote this a few minutes ago, but my internet stopped working, I'll just reply to you with my point of view, I also liked your explanation haha.

Check out sass, it's a great way to manage your css, throw in nested rules, variables, mixins, selector inheritance, etc.

We're managing a stylesheet that clocks ~3500 lines. It makes life a little easier! ;)

Sass is an extension of CSS. It added some simple, but very nice, features.

These features include:

variables
partials
import
mixins
extends
operators

Why?

To save you time and give you more power. Sass is lit.

Variables aren't about repeating entire blocks throughout, that's what mixins and or extend would do. Variables are used for things like global colors, and global fonts (basic examples)

$mainColor: #f00; $secondaryColor: #222; $mainFont: Helvetica, sans-serif;

a{ color: $mainColor; } div{ background: $mainColor; color: $secondaryColor; }

http://sass-lang.com/guide That has some good basic examples :)

They do offer the tools to use it. It's just a command-line tool first. Others have made GUI apps (of which Sass recommends several), but in the end all they do is run the same terminal commands for you.

I'll agree, there is a bit of a barrier to entry for newcomers because of the skills required, but their target audience is more the power user who knows CSS very well and wants to expand their tools.

Chill, it's all just icing.

Sass and Less

Syntactically Awesome Style Sheets (Sass), doesn't that sound nice?? Sass and less have nothing to do with frameworks, they're merely improvements on writing css. Less is dead, Sass won.

Sass really just gives variables, includes (DRY), nesting, and understanding Sass will take 30 seconds looking at their website because it's really just better Css.

I'd say always use Sass, but once you use it… you will.

Framework vs Roll your own

Look at Bootstrap and see what it offers. If you think you'll save time by using it, use it. If you think you'll write more code, or spend more time, undoing what they do… don't. These are used on a per project basis, and each project will have different requirements. It only takes one project to "learn" since they're just classes.

(Use bootstrap 4, it's Sass based, Bootstrap 3 has a Sass port as well)

Some of the cases were the author uses lists would be better suited to use maps instead.

I've never used Less, but from what I see I'd recommend Sass instead. It compiles down to css, and seems to offer similar functionality (vars, mixins, helper functions...). I've installed and used it on Windows and Linux just fine, and the compiler monitors files or dirs:

sass --watch style.scss:style.css sass --watch stylesheets/sass:stylesheets/compiled

Theres garden if you want to do fancy stuff (dynamic css generation etc), but that's probably over-kill. I recommend keeping it simple with normal tools like sass.

I wrote all of my stuff using a preprocessor language called SASS (SCSS syntax), which offers a lot of really useful tools for writing stylesheets. I have to run my SASS through a compiler to generate CSS that I can use on Reddit, though, so I'm still bound by all of the limitations and restrictions of CSS. This just makes the production process a whole lot less painful (usually).

You're entirely right about it being limited. CSS is designed for presentation only, and there are some very frustrating restrictions for people like me because of that. With a sufficient understanding of what you're developing for, though, you can create stuff that approximates what you're aiming for (for example, the animation on our flairs isn't the text sliding out from nowhere, but approximating the effect by having the text expand from size 0 to full size).

Not to derail too much, but have you tried Sass or Less? They're fairly similar (especially when comparing Less to Sass's newer SCSS syntax) CSS preprocessors that offer variables, functions (as mixins), and more, making CSS a lot nicer to write.

Regarding efficiency:

The first option is the least efficient. It's four times larger (number of characters) than .1, .2, .3, .4 {border:1px solid black}. This will eat into your bandwidth over time (obviously, your little example is so small that it isn't going to matter, but for larger stylesheets it does).

-

Now, about your last question, about giving them all the same class: only give these four divs the same class if they are conceptually related. Are they all the same kind of thing? Have the same kind of purpose?

If they just happen to be styled the same (eg: you want them all to have the same black border), that in-itself is not a good reason to apply the same class to them^1. All in all, you should usually go with the .1, .2, .3, .4 { ... } version typically. Then later on, if you want to style .2 differently, you can either remove it from the list or add a second .2 { ... } elsewhere to add more styling.

-

^1 you may want to use a meta-language, like sass, which allows you to define mixins, so that your stylesheets remain DRY.

Oh man, those class names...

It's really important to have semantic HTML so somebody else looking at your source can make an educated guess at what you're trying to do.

I'm not just talking about HTML5 tags. Can't support them because of client needs (legacy browsers?). Totally fine! Using something like

is absolutely acceptable. .box582 and .box298 are horrible names, not to mention their behavior is not analogous to each other (one floats left, one floats right, wtf?)

YOU ARE ABSOLUTELY RIGHT TO ROLL EYES / BE CONCERNED FOR THE NEWBIE

I don't know if you've heard about LESS, SASS, or Stylus, but they're basically CSS + some really nice features CSS should have had. You can declare variables (super useful), functions/mixins (apply some commonly used style like a gradient without writing all the css / vendor prefixes out), and my favorite, nested css. Basically looks like this (Stylus, you can leave off some things like brackets, colons, and semi-colons):

body h1 color black #yourID font-weight bold

It's really useful for organizing your CSS. I like Stylus the most but all 3 of those css "languages" are really amazing and have great community support and code sharing.

It's still the only real way to do what it does. Everything is frameworks and stuff like http://sass-lang.com/ these days though. They build on top so knowing actual CSS, javascript, and HTML mean you are way ahead of what are basically what we used to call code monkeys who learn "frameworks" and to whom a simple language like javascript is deep voodoo.

In SASS:

$viewport-breakpoints: (xs:0px, sm:768px, md:992px, lg:1200px)

@each $vp-key, $vp-break in $viewport-breakpoints @media (min-width: #{$vp-break}) .fr-#{$vp-key} float: right .fl-#{$vp-key} float: left .fn-#{$vp-key} float: none

In CSS:

@media (min-width: 0px) { .fr-xs { float: right; } .fl-xs { float: left; } .fn-xs { float: none; } }

@media (min-width: 768px) { .fr-sm { float: right; } .fl-sm { float: left; } .fn-sm { float: none; } }

@media (min-width: 992px) { .fr-md { float: right; } .fl-md { float: left; } .fn-md { float: none; } }

@media (min-width: 1200px) { .fr-lg { float: right; } .fl-lg { float: left; } .fn-lg { float: none; } }

> [Streamer] Twitchplayspokemon: I spent the day so far making a really nicely animated current viewer indicator for PBR2.0 /u/TPPStreamerBot

>[Streamer] Twitchplayspokemon: 100 lines of js and 50 lines of sass /u/TPPStreamerBot

> [Streamer] Marsadeptenten: '50 lines of sass'? We wouldn't expect anything less from you, @Twitchplayspokemon . :)

> Twitchplayspokemon: @MarsAdeptEnten no really that's what it's called /u/TPPStreamerBot

Sass, pls. Use LESS, imo. [Keepo](#keepo)

I'd say you should get familiar with CSS first. Identify the usual cross-browser issues and learn how to deal with them. Once you have a deep understanding of CSS, then dive into frameworks.

I, and this is a personal opinion, don't like to use things like Bootstrap or Foundation. I believe their place is for rapid prototyping of admin dashboards and those kind of tasks, but I wouldn't build a web app with either of them.

You can, however, use only a select features of those frameworks like the grid system. That is something I would do. My personal choice when it comes to grid systems is Neat. I really like the idea of keeping my HTML markup clean, kind of like separation of concerns in other programming languages.

This is all a personal opinion, take it as that.

Another thing you'll want to check out is preprocessors like Sass and PostCSS (yes, I know PostCSS is not quite a preprocessor, but it can fill those shoes.)

pure CSS, no. use SASS http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

but why not just add both the red and blue classes to the element you want? that way it will have all properties from both classes

The great thing about SASS is that it has a huge community of open-source plugins and frameworks to get involved in.

http://sass-lang.com/community

There are other options like Rework that are more hardcore, but I'd play with .LESS or SASS a bit before jumping into the deep end with those.

https://github.com/reworkcss/rework

CSS animations are fairly easy. Using the transition property we can animate different states, and animation allows us to just do more complex.

The transition property accepts four values. The properties to be animated, duration, easing and delay.

/* property, duration, easing, delay */ transition: background 1s ease-in-out 0.5s;

For example, if I wanted to have a link that changes colour:

a { color: #f08; transition: color 0.2s; }

a:hover { color: #000; }

When you want a different animation for the fade in and fade out, you can just override the transition:

a { color: #f08; transition: color 0.2s ease-out; /* fast fade in */ }

a:hover { color: #000; transition: color 0.6s ease-out; /* slow fade out */ }

For more, see: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

The animation property is different entirely. Using keyframes, we can set different properties throughout the animation.

@keyframes pulse { 0%: { opacity: 0; } 50%: { opacity: 1; } 100%: { opacity: 0; } }

/* animation, duration, easing, delay, iteration count, direction, fill-mode / animation: pulse linear 0s infinite / normal none */;

The delay argument in animation is a fun one. When you set a delay, the animation will wait, obviously. Any number lower than zero causes the animation to skip a little. If you have a bunch of elements with the same animation, you can set a negative delay to make each element start at a different time without delay. Yey!

Anyway, so much for animation. Just fool around on CodePen.

I have to admit, I don’t have a magic tip to get better at Sass. I found the Sass guide more than enough to get me started.

Not true! Larger projects need more thought, and benefit greatly from something like Sass which gives you mixins, variables and nested selectors to name a few. Also see Compass, which is a toolkit built on Sass. With it you can do things like:

#mydiv { width:100px; .coolShadows { @include box-shadow(#000,3px,3px,5px); } }

SASS needs to be installed on your machine first (open up a cmd/terminal and type sass -v if it returns an error, Google 'installing Sass' and get started! It's not as hard as it may seem)

You edit your scss file like you would any css file (in a text editor or whatever).

The trick is to make sure you have SASS running in the background while you work on your .scss files so that SASS can generate or update the css file for you.

to do this, you open the terminal (or command line) at your project directory and follow the instructions for set up

You're looking to run:

sass --watch {{name of Sass folder}}:{{name of css folder}}

If there's any errors, troubleshoot.

Hope this helps, but I'm not exactly sure on your problem.

Sass is a good candidate. It's CSS with variables, nesting, and other useful features to improve on traditional CSS. The source Sass files are converted to CSS to send to the browser.

The main downside is that in-browser developer tools don't work as well with Sass. You can set up source maps to help work around this problem, but it's still a bit clunky.

More generally, the code would be better if it was unit agnostic. Assert that all parameters have the same unit, and use that, rather than px.

This can be achieved using the <code>unit</code> and <code>unitless</code> functions.

my guess is that you are using the ruby solution which is slow as fuck

if you don't depend on it, switch to libsass (grunt-sass)

Keep doing it, it will a lot easier.

Check out SASS and bourbon.io

use them both now while you are starting and it will make your life a lot easier in the future. Plus, you will surpass all of your peers in development.

It's probably time for you to consider using a CSS preprocessor ( SASS, Less, Stylus ), if you're not already, and a media query library like Rupture, BreakPointSlicer, Neat, etc. which will allow you to have your media queries directly next to the CSS they alter, as well as producing a well structured final document.

Is there a reason you can't compile the SCSS into CSS? SCSS is not meant to be the end product.

If you have Ruby installed, you can install SASS with gem install sass

Then compile the CSS with

sass input.scss output.css

There are a bunch of extra options like minification & whatnot, but the basics should suffice. Read up here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Edit A little Googling came up with a couple plugins for Visual Studio to handle SASS (looks like even compiling it for you). This one looks promising & powerful (though I have zero experience with Visual Studio)

Mindscape Web Workbench

Sass is a CSS preprocessor in which I write that compiles to plain CSS. It has a lot of awesomeness that makes both what I write and what is produced much more pleasant and useful, assuming the dev knows what they're doing. I didn't when I started. I'm pretty sure I do now. There are definite cuts in text length in what I've done so far, but I'm by no means done. Just foundation and header, actually.

Http://sass-Lang.com

Http://github.com/myrrlyn/teslore

Quite the opposite. I am against WYSIWYGs, and think they are the bane of good content strategy.

CSS preprocessors give you access to things you cannot normally do in CSS. They open up a set of tools to give you complete control over your CSS-- in ways that were not possible before them.

Variables: Instead of having #HEX-COLOR in your code, you can just put $lt-blue. Then, if that color needs to change, instead of doing a search and replace throughout your code--- you just change the variable.
Math: You can do math on different variables and numbers. Ever try to divvy up design into columns, all with percentage-based with? Heck of a lot of number crunching... and god forbid your math was messed up. Never fear, you can do it with just a function or two.
Reusable styles--- the cornerstone of component-based design. You can quickly create a single reusable style, and extend that across your code--- simpler code, faster load. BOOM.
Where do I put XXXX--- I have one giant CSS file, and I need to add a new component. Do I add it at the end? Or is there a place already? With a preprocessor, you can separate that giant file into many little ones, making organization and identification easier.
Inline comments. No explanation needed.
Git Conflicts: You know when you have that huge style.css file... and you and a developer both make changes... now you have a weird git conflict. Since you can separate out the files, this happens about 95% less than it would.

These are just some of the advantages. Check out the http://sass-lang.com/ site for more information on what Sass can do. and /r/sass too!

It seems to me that you could easily use a CSS meta-language like Sass or Stylus to mitigate this non-semantic thing. Sass was mentioned in another comment here, by someone that knows more about its use than I do.

I think as long as you aren't loading a ton of resources from external locations, you should be fine (but will still see poor performance considering the requests). But it really is not a best or even great practice.

What is your use case?

Either way, if you're only using @import on local files, it may be worth learning/using SASS.

I like this! It's a very clear concept to get your head around. I think that these principles go crazy good with sass or less, as they allow for extending modules and components. This has potential!

Bookmarked it for a future project. I am currently using BEM (Block-Element-Modifier), and I see big similarities in these two! I'm going to give this a try and see whether I like MaintainableCSS (they should do something about the name though, but that's nitpicky) to work with or BEM.

Thanks for the share! Keep it semantic ;)

Search and replace is the best option, really. In the future, you could consider shifting to something like sass or less to make this kind of problem go away for good.

I don't think there's a way in raw CSS to accomplish this. CSS has limited tools for avoiding repetition.

One thing you could do would be to add another class to each of the children in a group, and style the color using that class. Of course, this starts creating coupling between your markup and your style, so that's not ideal either, but may be your best option in raw CSS.

For a lot of reuse cases, like this one, many people turn to CSS compilers like SASS: http://sass-lang.com/

have you tried the official guide? There's also LESS and Stylus in the "compile to CSS" camp. These systems usually have built-in function for color manipulation. Here's the ones for LESS and these are for SASS

The way I do this in static sites is by using SCSS partials. (SCSS = Sassy CSS)

Are you using SCSS? If not, you should be. It may seem overwhelming and a pain to set up for inexperienced devs, but it's really not. Also once you start using it you'll never go back to normal css. Here's a really simple guide to get you started

SCSS allows you to make new files called partials. These are .scss files with a _ underscore before them that tells scss not to pre-processes them in to a css file.

So the structure I follow is

Have 1 global.scss file
Make new _partial.scss files for each individual page or any other css I want modularised (like bootstrap, typography, etc)
Use the scss @import 'partial'; in my global.scss file

This means that Scss will preprocess all your partial files in to one global.css file for production, but during dev all your css is modularised in to seperate files.

Some of the benefits of this system are that

your css is modularised and therefore really easy to locate/organise
using the .scss @import command happens at the pre-processing stage, so doesn't result in extra HTTP requests. There is only one HTTP request for the global.css file
You only need to include the global.css file in your <head> as all your css is included in it.

I'm going to leave the question about JS to someone else as I'm not sure I have the best advice on that subject. Feel free to ask any questions if you don't understand what I'm saying - but the guide I linked should tell you everything.

Doing it that way is insane for any site with even a tiny bit of functionality. Imagine that you want to change the font size for your mobile site. Okay, now scroll through your entire file, find every media declaration, and check if there's a font-size in there. Missed one? You betchya.

Somewhere between 500 and 1000 lines, a file becomes pretty much impossible to (easily) maintain. I strongly prefer to create many different css files:

main.css //css that's common to the whole site main-ie.css main-mobile.css main-tablet.css blog.css //css that is blog specific (main.css is still required) blog-ie.css ...

Once development is done, I'll often combine/minify those files, but for anything other than the largest sites, it's not a huge deal.

Also, SASS has made css dev waaaaay easier.

You're absolutely right that CSS is "bad" for layouts and that is because it was not meant to create complex layouts in the first place. When it was invented it was there to help style documents, like formatting text and creating tables etc.

CSS is hard. It takes a lot of knowledge to get things right and to understand the relation between properties. Everyone who disagrees has either forgotten how s/he started or is not working intensely with CSS. You can get your way around the "language" and it is improving (flex box for example) but still there is a lot to fix.

I don't know your skill level nor how much experience you have with CSS and at what scale. I recommend using a pre or post processor like Sass (http://sass-lang.com) or PostCSS to get over the browser specific prefixes and help maintain the whole thing.

What helped me a lot with CSS is accepting the fact that it is broken and learning how to work with this complex, broken standard. After all, it is usable and you can do quite amazing things with it.

A brief skim through this should get you started.
http://sass-lang.com/guide The awesome part is, if you know CSS, there isn't much you'll have to learn for SASS/SCSS, or any css preprocessor really. I also found this little tool helpful to see how the syntax compiles to CSS. http://sassmeister.com/

Speaking of 'conflicts of interest'...

The person who made the 'apology' pull request makes contribs to Sass. Which DICSS claims to supplant for certain use cases.

Also, 'Sass' is a 'feminine' brand. I'm not making that up: http://sass-lang.com/styleguide/brand

JFC, if you hate the soggy knees so much, Fork it and name it something else.

Oh wait, that would mean actual effort instead of grandstanding.

It's a variation of SASS, which is short for "Syntactically Awesome Style Sheets." SASS is a CSS preprocessor that adds a bunch of really useful features to CSS, like variables or the ability to render blocks of CSS inside other blocks of CSS. I've built something of a backend for flair creation in this that makes the flair creation process dead simple.

I believe you need the SASS documentation. There's a command you can run to do this conversion.

$ sass-convert style.sass style.scss

You can also convert the opposite way.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Sass is a prepocessed language based on css. Meaning you write sass, but it results in CSS. It adds features like variables, so you don't have to redefine the same color in different rules.

It's got lots of other neat features that you can find here http://sass-lang.com/guide

You often use a tool to convert sass to css and then reference the css in your webpage. you do not do this converstion at runtime, this is a build time step and you can use something like Grunt to do it for you.

> But I still think that it is possible to build a language agnostic package manager which fits them all.

Honestly, I think politics and technology preferences would stand in the way far more readily than any technical challenges. IMO, it can be done.

> But that's an ego problem. What do you think?

I'm inclined to agree on that point. At one time, I was one of those people, thinking that if you're going to use technology X, it should be able to do lots of jobs better than technology Y. So why not adapt ever more of the toolchain to technology X? But you wind up losing out on all the other work being done out there, even if they don't use your favorite tech. Nevermind the endless whirlpool of suck that is rebuilding Rome (perhaps poorly) from scratch. This zealotry for one tech over another at all costs really hurts more than it helps.

And nevermind that your compiler may not be written in your favorite technology: a lot of them are written in C. Amusingly, GCC is now written in C++.

A good example of this all this is SASS. The SASS compiler is in Ruby. Yet it's the best way to get managable CSS into your Python web app, or Vibe.D, or PHP, or Angular, etc. At the same time, SASS is built into the Ruby world-view such that you need to install the runtime and the SASS gem to use it (http://sass-lang.com/install). To my knowlege, there's no "virtualenv" style install of it to be had.

TL;DR: Pragmatism rules the day, and that applies to both providers and consumers of developer tools.

SASS allows for nested rules, variables, inheritance and such in CSS. Its a super-set of CSS and uses the .scss extension. http://sass-lang.com

Compass leverages SASS and provides an authoring framework. It will watch your sass directory for changes in the .scss files. When there is a change, it regenerates the CSS files, which are in the CSS directory.

This let's you keep your working css files separate, generating cleaner css files for the website/application. Since Compass is always watching for changes, you don't have to worry about the synchronization of changes.

HTML5 is just the latest version of HTML. It adds a lot of stuff and helps enable more powerful web apps among other things. Google it :)

Use SASS or Compass in compact rendering mode. Not only will that compress your CSS, but the mixins will make writing CSS3 a much faster and more pleasurable endeavour.

To complement this, everybody here should check out Sass. For example, the first code sample could be written like this:

#nav { float: right; ul { list-style: none; } @media screen and (min-width: 400px) { li { float: right; margin: 0 0 0 .5em; border: 1px solid #000; } } @media screen and (min-width: 800px) { width: 200px; li { float: left; margin: 0 0 0 .5em; border: none; } } }

Which Sass then compiles into this:

#nav { float:right; }

#nav ul { list-style:none; }

@media screen and min-width 400px { #nav li { float:right; border:1px solid #000; margin:0 0 0 .5em; } }

@media screen and min-width 800px { #nav { width:200px; }

#nav li { float:left; border:none; margin:0 0 0 .5em; } }

Over the course of a complete style sheet, you get to avoid a lot of repetition and you get stylesheets that are easier to maintain.

Sass also gives you plenty of other awesome features:

Variables
Mixins
Nesting
Inheritance
@import optimization (imported code is placed directly in to final compiled css file rather than left as a blocking http request)
Math expressions

One of my favorite things to do with SASS is automate vendor prefixes using mixins.

Sass-generated CSS can be further optimized with csstidy (on online version is available here). One such optimization is when you nest the same media query in multiple elements -- Sass will actually write two media queries rather than combine them. Csstidy takes care of combining the media queries if possible.

>But I can't tell what it is that code is doing.

It's the same as:

.Foo > .bar{ float: left; } [...] @media (max-width: 979px) { .Foo > .bar{ float: left; } }

Any .bar which is the child of .Foo gets floated to the left.
If the width is smaller than 980px, any .bar which is the child of .Foo gets its float property reset to the default value of none.

>What would it save me doing?

Having the override values right there makes it a lot easier to work with. You can a) see if there are any overrides and b) what those overrides actually do.

>Could you recommend me any further reading on sass?

Sass is a CSS preprocessor written in Ruby. This means that you'll need a Ruby interpreter on your development machine, but it doesn't mean that you'll need one in the production environment.

http://sass-lang.com/

http://compass-style.org/

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Don't have an answer to your question, but you may want to look into SASS + Compass Framework

It will allow you to write the following:

div { @include border-radius(4px); }

which will output:

div { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }

It is not common to have a single CSS file for bigger projects. Depending on your front end stack you will want to be using some form of SCSS/SASS so you can break up files into partials that can be imported and used where needed.

Separating up different Heading tags, and elements should be done using classes and in some cases id's so you can style them independently, and re-use accordingly.

For styles that are going to be used on all pages (global styles) then you'll have a specific CSS file that gets loaded on all pages so those styles are available.

Learn more Scss? Honestly you don't have that many things to learn except the official documentation: http://sass-lang.com/guide, just don't nest things that don't needs to be nested (classic mistake, overly complex and heavy code) and you should be fine. Welcome to wonderful world of Scss!

If you use a preprocessor you still need to compile it to CSS to work with HTML. It's just there as a convenience if you like to do stuff like nesting, loops, leaving out {} etc.

Here is a live example. If you click on the down arrow to the right of the SCSS frame you can click on 'View Compiled CSS' to see what's actually being used.

http://sass-lang.com/install

If you're totally new to this I'd recommend just sticking with vanilla CSS for now.

SCSS and Sass are only different in syntax. They're literally the same language, but SCSS looks more like CSS. Technically I write in SCSS. This page has the toggle switches on the code so you can see the difference. I'm the "Sass Queen" at work, which I'm pretty ok with.

I'm sure you'll learn with Udemy, but Sass is very popular and there is a ton of free information out there.

Youtube. Here's a good playlist - https://www.youtube.com/watch?v=fbVD32w1oTo&list=PL2CB1F80266E986EA

The Sass basic documentation - http://sass-lang.com/guide

And if/when need be the in-depth documentation (don't get overwhelemed, just learn what you need when you need) - http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Just so you get an idea - I only really use variables, nesting (try not to do this too much though if at all when possible, it's a "best practice" for larger projects as it helps avoid specificity wars) and partials/imports (for file organization). Other than those, I rarely use anything else Sass offers. But don't get me wrong, others love all the other stuff like mixins and operators. I just don't really have a need for them.

You shouldn't really have to paste any styles. You can divide your styles into multiple classes, and give one element multiple classes to combine them. Or you can use features of sass, mix-ins or extend.

Don't use the Ruby engine, use LibSass instead, it's much faster
I don't understand your argument of "I can write CSS much faster". How is that possible? Any CSS is valid Sass, so even if you just write "normal" css in .scss files, the speed stays the same. Unless you meant it takes long to compile, in which case check point 1. and also use some tool to automate the compiling (I prefer Grunt, also popular are Gulp and Webpack)
You need to write your css in a modular way, and divide everything into components. Sass makes that very easy as you can include files in the build step instead of having tens of .css files and @import-ing them which would be terrible. If there was nothing else to it, this would be enough (imo) to use Sass.
Nesting! When writing "normal" css, you need to repeat yourself by copy-pasting parent selector when you are styling child elements. In Sass, you simply write it inside of the parent, logical and time-saving.
Variables and mixins!
& selector, e.g. &:hover
Probably more that doesn't come to mind right now.

Also, if you already don't, use Autoprefixer. Not really Sass related but you should use it!

So node is a backend language, like PHP. It also has a package manager to quickly and easily add libraries called NPM.

scss is said as 'sass'. It's a file type for Sass which is like a compiled language for css. It compiles Sass into css for the browser.

Package.json is a project specific file that contains refrences to any libraries you install with npm install --save. This allows anyone else who works on your project to have the same libraries and dependencies for the project without having to commit the dependencies to the git repo.

Lots of people use node.js, like walmart and many other fortune 500 companies.

Getting node to work on windows can be a pain, Ive got it working but for beginners its a lot of work. I'd recommend using a linux VM or a mac if you can. Otherwise here is a short guide is, install Visual Studio (the free one). Install Python 2.7. Set your environment variables for python to where you install it, install node. Should be good to go

Yes, windows is your main problem. The problem is that you can't compile many of the dependencies needed for some NPM packages

Is angular a requirement for node? No, its not. It's completely independent from node and is no way required.

for single files the sass beautify sublime plugin does the job (yes it works on scss as well)

but for my bulk pipe i don't even use a plugin (because my sass comes out clean and linted right out of the editor) the final touch is sass-convert

sass-convert messy.scss clean.scss

It's called an interpolation; the value of the variable is going to be used in the output there. This syntax lets you put expressions in places (like property names) where they wouldn't be parsed/allowed on their own. Here's the docs, and here's an example.

I'm assuming this is SCSS (or similar) and not CSS, which you should really note.

Here's what you want to read: http://sass-lang.com/guide

It's defining a variable, yes, to be referred to by value later on in the document.

Some notes here:

The name is not inherent to SCSS/CSS. It could have been named $asdfg or $dogpoop or anything similar, and everything would function the same. It's just a name.
'Constant variable' is a slight contradiction, here. I'd google "what is the difference between a constant and a variable" to learn more.

I couldn't find any examples with pictures from other grid systems, so I'll shamelessly plug my own grid system, Flint. If you use Sass, check out this issue on GitHub (with pictures!) on possible solutions using push/pull with negative margins or transforms. This is how I usually do it. Duplicating markup is never the right solution; you can almost always do it with CSS.

No problem! It's worth noting that this is actually done using a CSS preprocessor, so the syntax and capabilities of the generator are a fair bit different than that of regular CSS. That said, it's hugely configuration driven, so you should be able to do everything you need through there.

Hey, /u/bdenzer!

I've seen you around in some of the subs; nice to meet you! :)

Yeah... I actually went to a "computer camp" back when I was in high school (early 2000s). I learned a little html and liked it, but I didn't fall in love with it. I want to school for psych and then again for education/counseling. Then I rediscovered coding and learned that I do in fact love it! I code at least a little something every day! Hindsight is 20/20; I really wish I would have gone to school for cs or development or design or whatever.

Anywho... Yeah, cool! I like FCC. I've got a few of the new js challenges to finish (love those!) and then the Simon Game, Tic Tac Toe (started), the Wiki reader, and Camper News or whatever it is. Then done! :)

Basic SASS is relatively simple... SCSS is SASS that uses pretty much the same syntax as plain old CSS... it gives you a lot more functionality (variables and conditional logic and the like!). If you're interested: http://sass-lang.com/guide

But yeah, cool! Welcome!

If we get this place/sub up and running, what do you want to see from it? What's your preliminary vision for it?

Many .scss files are often used, broken up by use, like _header.css, _footer.scss. They can be concatenated (not linked like css) together using @import 'filename';. Leading underscores mean that a file is imported only. Colors could be in a dedicated _colors.scss file that would be imported first so all the rest have access to them.

Find import here: http://sass-lang.com/guide

Minor nitpick but SASS doesn't require Ruby nowadays either. Check out libsass (repo) and node-sass.

Stylus was really pleasant to use when I tried it, but unfortunately it doesn't have the same community backing as the two big players.

Learn and use SASS.
Use prepared SQL statements to prevent SQL injection.
Commit your database schema into your git repo.

Format your code properly and clean it up.
You only need to make a DB connection once. You don't need to create string variables if you only use them once in a query; pass them directly to the function. Use the OOP version of mysqli so that you have $db->query("SELECT * FROM team") instead of mysqli_query($db, "SELECT * FROM team"). SQL column names should be lower case. Try to reduce the if nesting.

I would say that blog-content__para is overkill, considering the p element stands for paragraph. Also, there is no advantage to having the extra class when, as you noted, you can simply select blog-content paragraphs with .blog-content > p

If you haven't tried out sass yet I highly recommend it. Compass is pretty handy too. I haven't written plain CSS in years.

it does what you think it does: it takes a color and makes it lighter by a certain precentage. great for hover/active states and such.

http://sass-lang.com/documentation/Sass/Script/Functions.html#lighten-instance_method

Probably the easiest way is to give it ago on some quick web editor. JSBin, JSFiddle and CodePen all have the option to compile SASS.

Try some of the functionality you can find in the SASS guide.

I generally don't bother with SASS for smaller projects, but you might still get some value out of it once you get comfortable enough with it. It definitely has the most value for larger projects, since it gives you a lot more control over how you organize your styles (lets you split them up into different files, lets you use variables, etc).

One of the things I like about SASS is that you can basically just write normal CSS and work in SASS-specific code as you learn and get more comfortable with it.

I forget which resources I used initially, but this looks like a pretty good intro. The main features I started out using are nesting, variables, and the ability to include SCSS files in other SCSS files.

I use Brackets to do any work with SASS, because there's a pretty nice addon for it that will auto-compile SCSS to CSS any time you save it. There are probably similar addons for most other text editors that support addons and have a decent size user base.

I really don't see a need or use case for this.

CSS needs a lot of help to be usable and all of the other options you mentioned (Sass, Less, and PostCSS) all do a better job of it.

Also Sass does not necessarily require node.js, it can run on node but can also use Ruby, C++, .NET, ...: http://sass-lang.com/libsass.

_ > But it's not a superset of CSS! Who cares? Do you use XSLT to render your HTML templates?

This comment misses the point. This is equivalent to saying "you write in HTML not XSLT, so why not just write CSS and not use my tool". The answer is HTML isn't that painful to write in, the reason CSS preprocessors exist is because CSS is awful. However I still would rather use better tools, but some people may prefer your minimalist approach.

Also being a superset is nice if you want to use 3rd party existing css files within your own. For example in Sass you can include css files as part of your bundle even though it's not written in the Sass syntax. This is similar to why people avoid using Dart instead of JavaScript superset languages -- because interoperability is a thing.

You mean prefixed with an underscore like that? It's just how Sass handles partial imports so that when you import it you don't have to type out the whole filename, just the bits between the underscore and the file extension (ex: @import "typography"; instead of @import "_typography.scss";).

take 5 mins to read this, it will show to why sass is useful.

I especially love the partials functionality which that link will explain. It allows you to really nicely modularise your css

http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

https://gist.github.com/matyus/4339721

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_scope_and_content_blocks

Listos version: Any variable defined outside of a selector will have a global scope.

Ahh, much more comfortable somber colors. I personally prefer your second example with a more blue-ish hue c:

I recently got into SCSS (another pre-processer for CSS, just like LESS). You can use any of the original CSS features - the extra LESS features just makes some of the more tedious stuff in CSS easier and prettier. In other words, you don't need to learn LESS (i believe) to contribute to this project ^^

That said, learning to use pre-processers is absolutely heaven if you like toying around with CSS yourself - I much prefer SCSS over SASS or LESS since it has a syntax that looks completely like regular CSS. It does take a little to get into, but once you're set up, it's a smooth ride :3

Sass and Susy is where it's at. Set up a solid media query mixin and some breakpoints and you're good to go.

Any framework will just end up bloating your codebase with unsemantic crap and eventually force you to write bad CSS for local overrides no matter how careful you are about it.

Job Title / Theme: Frontend Developer

Operating System: Ubuntu, OSX

Machine: laptop, Hackintosh

I write my code using Sublime Text 3 and have a few scripts running in the background. The first is react-tools which compiles JSX to Javascript. The other is SASS which is the CSS processor I use. Finally, I use Watchify (Browserify) to bundle everything up.

I've yet to play around with Gulp or Grunt, so I just use a custom shell script that runs all three of those programs at once.

So far this workflow has been working pretty well for me, but I don't really feel good about using a shell script to compile everything so I'm thinking about using a Javascript taskrunner like Gulp.

Less is a pre-processor for CSS. However, if you're going to look into a pre-processor I'd recommend SASS. Sass seems to be winning out over Less in the grander scheme. http://lesscss.org/ http://sass-lang.com/

I think that what you are looking for is @import "name" and @import "_name". The latter is similar to LESS's @import (reference).

You can find a detailed explanation in Sass Reference.

EDIT: >Although why the specific sizes for the text? Why not just use h1, h2, h3 etc?

Generally using elements for their default values is a bad practice. They won't render the same way in all browsers and make it difficult to manipulate in the future. I noticed you used a lot of <center> and <br> tags which should generally be avoided (center especially, br does have some uses). Generally, I would avoid these tags unless they are really called for:

<center> --"margin: 0 auto;" and "text-align: center;" (there are others, CSS is messy) are generally better options
<h1>-<h6> --I really prefer using a <header> tag with a custom class
<b> --Generally, use <strong> or simply add "font-weight: bold;" to the element's class
<i> --Generally, use <em> or simply add "font-style: italic;" to the element's class

And several others. One of the big paradigm shifts is to move towards semantic markup and really separating our aesthetic goals from the markup needed to generate it.

It doesn't really matter for a site as simple as the one you are creating (I always write markup this way out of habit), but when you want to develop a more robust application it's a good idea to do this so that you don't get plagued by default settings and confusing hacks (though you indubitably use many hacks with CSS). One thing to look into, depending on how much you want to learn about CSS, is a style framework like {less} (my favorite) or Sass. These give you much more control over how your markup turns out and gives you access to things you normally see in programming languages like inheritance, variables, loops, functions, etc.

To learn more about CSS, design, and the CSS community, I'd recommend going on http://codepen.io/ and looking at some codepens every couple of days, and trying to figure out how they're made. It doesn't matter if you don't understand everything you see, just learn something new everytime. Might help to know about compiled languages like sass and haml. And like TheAceOfHearts said, make stuff.

Can you help me figure out if I am able to and how to use Bourbon? I use Sublime Text 2 as my code editor and installed sass via the cmd line. Can I install Bourbon the same way and use it in ST2?

This is what you really should do if this is a production app. That way, you don't have to spawn a PHP process every time the CSS file is hit.

I prefer LESS but there's also SASS / SCSS. You can make your PHP app check for changes in the preprocessed file and generate the CSS file once, then future requests avoid that overhead until it's changed again.

Bonus: Both support variables.

Okay preprocessor very simple:

you work in a .sass or .scss file which allows the use of something like variables, mixins (functions)
then you "render" the .sass into a .css file something like Prepros or CodeKit
A lot of these programs to preprocess are pretty useful since they have something like livereload which refreshs the page everytime you save a file to see live changes

To learn more about sass http://sass-lang.com/

There are other preprocessors out there but honestly sass is the industry standard. Less is sometimes used but it's weaker than sass.

It's just an easy way to set fluid width grids of x number of columns. If you had, say, 12 columns, it loops through and generates classes .x1of12, .x2of12, .x3of12, each being the percentage of 100 (full width) that that number of columns would be.

So for x3of12, it's ((1/12) * 3) * 100) = 25, as you would expect since 3 is one quarter of 12. In this case he's subtracting 2 (so, 23), giving each div a 2% gutter.

It's much better to do this as a mixin, so your columns aren't explicitly named. See Thoughtbot's Neat and (I believe) Suzy for an example of that.

Also, SASS has a built in percentage function, which would be better than concatenating strings.

It's a CSS pre-processor. See what you can do with it here.

I consider myself a hobby dev, but SCSS has made my life so much easier! I mainly use it for the variables, nesting and partials/imports.

http://sass-lang.com/

Mozilla is also looking into this stuff.

Currently, the best way to mimic variables is using inheritance.

SASS is a CSS preprocessor (gives you variables)
HAML is a a modification of HTML for templating
Grunt is a Javascript task 'thing' that helps automate tedious tasks.

Since you're only developing emails, there's really no need for you to know these languages. (They're mostly for web development.)

Although, I'd highly suggest moving away from Dreamweaver; it has a habit of creating code soup, and doesn't necessarily use best practices. Not saying it's a bad program, but if you don't know code, it can create poor user experiences and results.

You'll need to use @for for this, or alternately, the new maps in SASS 3.3:

@for $margin from 1 through 3 { .col-#{$margin} { margin: 1px * $margin; } }

That should produce classes named:

.col-1 { margin: 1px; } .col-2 { ... } .col-3 { ... }

For information on doing this instead with maps, see the official documentation

EDIT: In short, no, you can't arbitrarily create class names that behave as you described, but you can explicitly create as many as you need.

@media queries can sort of do what it looks like you're trying to do.
Learn Sass/SCSS and how to use it. If you're on Mac or Linux, just get the Ruby gem straight. If you're on Windows, I personally prefer Cygwin and its Ruby to the standard Ruby install, but even more preferred is the Visual Studio plugin "Sassy Studio." Your coding will never be the same. It's got variables, conditionals (if/else), math (including color math), for loops, and mixins (basically variables that hold full code blocks instead of just one value, and can support variables in their declaration). Oh and don't forget selector nesting. Best feature. You can even use the & operator to append the selector directly instead of making it a child: see example.

SCSS

body { formatting: stuff; &#main { formatting: stuff; } div { formatting: stuff; } }

comes to

CSS

body { formatting: stuff; } body#main { formatting: stuff; } body div { formatting: stuff; }

I've been using Sass to write /r/teslore (with plentiful and enormous files that come very close to reddit's 100kb limit upon compilation, the Sass syntax is preferable to SCSS) and SCSS for my own web projects and I assure you it's incredible.

You need to keep up to date with the Sass changelog.

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

Sass 3.3.0 was only released 4 days ago - hence why you got this buggy version (well buggy from --watch perspective), 3.3.1 was just released today off the back of the GitHub issue I posted above today. It should fix the problem.

Pretty much this. Sass is not complicated, and with their documentation bookmarked, you'll learn it in no time.

Another thing: Personally I compile the Sass code to minified CSS code and link to that. I know some link straight to the Sass code and it compiles when requested. I just see that as an unnecessary slowdown.

What is Reddit's opinion of Sass?
From 3.5 billion Reddit comments

➔ Sass website

By popularity on Reddit, this Service is:

100 reviews of this app found across Reddit:

What is Reddit's opinion of Sass? From 3.5 billion Reddit comments

➔ Sass website

By popularity on Reddit, this Service is:

100 reviews of this app found across Reddit:

What is Reddit's opinion of Sass?
From 3.5 billion Reddit comments