I have read about SCSS and LESS. But I can't understand the differences clearly.
I know SCSS and LESS both have more functionality of CSS (I mean extension of CSS).
What is different between SCSS and LESS?
Which one is better?
Both Sass and Less are CSS preprocessors.
From keycdn.com
A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.
So Sass and Less don't change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and maintain CSS with tools such as mixins, nesting, variables, and more.
SCSS, which stands for 'Sassy CSS' is one of two syntaxes for Sass.
From the sass reference:
The second and older syntax, known as the indented syntax (or sometimes just "Sass"), provides a more concise way of writing CSS.
The difference
Both Sass and Less have very similar features. Sass uses Ruby whereas Less uses Javascript. There are syntactical differences, for example, Sass uses $ for variables whereas less uses #.
There are some slightly more subjective differences, this website claims that "LESS Has More User-Friendly Documentation Than Sass", however personally I have found the Sass documentation and examples very easy to use.
SCSS and LESS are both "supersets" of vanilla CSS. That means valid CSS is automatically also valid SCSS and LESS, but not necessarily the other way around.
The difference between SCSS and LESS is that they have a different syntax. They mostly have the same functionalities.
Related
I'm hacking some SASS code (I've never seen any SASS before, I've only used plain old CSS2 in the past) and feel like I don't really understand what does #include media-query($variable) mean. I've tried googling it but surprisingly it doesn't seem to find any kind of manual or example for this code. As far as I understand it is used to define a medium-specific rule to apply a different style when the web page is rendered on a mobile device and in fact this is what I need but I feel like I have to understand the exact meaning of the code to use it correctly.
#include media-query($variable)
is a mixin call.
you should have somewhere in your sass files a mixin declaration like this:
#mixin media-query($variable) {
// ...
}
I created huge documentation with Asciidoc.
It contains about 600 .adoc files.
When I'm saving this documentation as a html file, I'm getting ~70MB file. It is to big file.
What can I do to create htmls from .adoc files. It's important for me to have table of contents.
I found plugin (https://gist.github.com/mojavelinux/d94372393950ca76d594) to asciidoc, but it doesn't work properly
Greets,
Adam
How does the resulting HTML file look? Doesn’t it contain duplicated stylesheets or similar content?
Part of the problem is that built-in Asciidoctor “HTML5” converter generates really bloated and non-semantic markup (it has nothing in common with HTML5 except the doctype). And the built-in stylesheet is not better. The result is quite hard to process for browser, so large document takes long to render. And the HTML file is also quite big, but I don’t think that this is the only cause of your 70MiB file.
You may try alternative converter asciidoctor-html5s. It generates much cleaner markup, focuses mainly on correct semantics, accessibility and compatibility with common typographic CSS styles. However, I don’t have a complete stylesheet for it yet and it’s not (can’t be) compatible with Asciidoctor built-in styles.
So I am on the fence about learning SASS. I still don't get it. Why bother if I can write CSS and understand it and it works.
Why learn to raise chickens if all I want is the egg?
It seems as though the SASS would take longer to figure out then just writing the css.
I can use variables in CSS3. I also don't understand why you would write .foo {padding: $width/2;}
I have to figure out what padding I want then figure out the mathematical equation to write it. I just want to write padding: 12px; and be done...
Please enlighten me on WHAT Makes SASS better? quicker? easier?
thanks -
Advantages are like this
You can separate your sass files into modular areas. For instance
SASS
1. tools (put bourbon or bitters here)
2. basics (body, links or common things)
3. modules (reuasable stuff. Boxes, cards, etc)
4. layouts (your containers, footers, headers etc)
In doing this you can easily find where the CSS is that you may want to change. There are several youtube videos that discuss how to make modular sass directorys.
You can use variables. Suppose you have a color that is used several times in a CSS file. SASS allows you to change one variable and that would change all instances of that usage. $red: #ff0000 is an example of a variable. When you use it, just use
color: $red
Mixins are functions that you can use and easily create a small amount of sass that will convert into large amounts of CSS.
I suggest watching videos on youtube to learn it. You wont be sorry. Especially learn modular usage like SMACSS
Here is a link to a vid that will help you
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
If you choose to stick with CSS, there is nothing wrong with that. (My understanding is that) People like SASS because they can type is with variables and such and it will then be converted into regular CSS. So yes, it does basically the same thing, but the improvements come as writing it, which is faster and more efficient. People that use SASS like that they don't have to write the same or similar things, they can instead just use SASS and get it converted to CSS which is faster than writing it, now I am just a SASS beginner, so please don't read into my thoughts that much, some of this may be not 100% correct, but it is my understanding. In my opinion, you should look into SASS and maybe try it a little, if you find it is more efficient and you like it more, stick with it, but if you decide it just isn't for you, then just stick with CSS.
I'm trying to check my website speed by Google PageSpeed Tools.
Google PageSpeed Tool result:
http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css
The css file is too much big. I downloaded for check the size and it's size 1.11MB . After then I'm trying to reduce css by Critical Path CSS Generator it's capacity MAX: 800000 characters but my css file have 1169501 characters. So it's can't reduce.
So what process I can use for optimization ?
A bit late, but my approach would be to see why your CSS file is so large. 1.11MiB for styling is too much. For comparison, a good size CSS should be under 150KiB, perhaps 200KiB maximum. In the case that your CSS is over that, you may have some optimizations you can do. A few points of optimization:
Unused CSS. Does your stylesheet contain CSS rules that aren't even used? There are tools out there that can scan/crawl your entire site and provide you with references to unused style lines.
Any data URI's like base64 encoded images in your CSS? Perhaps consider pulling these out. However, if this is your case, you can probably optimize the images through some sort of image file size crunching tool then re-encode them for your CSS.
Style duplication. If a group of classes have a large portion of style overlap, they should share a style definition and then be altered separately further down the CSS for specific style requirements.
Overuse of complex selectors. Generally having an ID or class name is preferred and one should avoid complex cascading DOM selectors. This not only hurts the browser parsing of the CSS but bloats the CSS file itself.
If you're using a template (looks like you're using Wordpress), then I'd almost suggest throwing out your current template, getting a nice lean one that is close to what you want and further styling that one with the above rules in mind. I believe that may be your quickest route to a speedy site.
do You have any elegant approach to benefit from CSS3 features, like border radius or gradients?
I am looking for a solution that would avoid browser-specific CSS properties and browser-specific stylesheet files. I find them both hard to maintain and too verbose.
It could be a Javascript library that would take care of cross-browser compatibilit. Thus, I could use only W3C CSS3 properties support (not browser-specific) and get rid of the library when browsers will start tu support CSS3 well.
So far, I have found these resources that seem to fulfill at least some of my expectations:
eCSStender - JS that is told to imitate the CSS3 features on different browsers (even IE6), I haven't tested yet, however (read about eCSStender)
Mordernizr - JS that detects which CSS3 properties the browser supports
... I'll fiil it with your answers
Or maybe you have other approach that lets You take advantage of CSS3 without very verbose code?
You could use LESS, which has a border-radius example on their homepage:
.rounded_corners (#radius: 5px) {
-moz-border-radius: #radius;
-webkit-border-radius: #radius;
border-radius: #radius;
}
#header {
.rounded_corners;
}
However, I really don't find it that messy to use browser prefixes. For a border-radius, the only thing you need is this:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
That will work in about a dozen browsers (if you include mobile browsers). Using indentation in this fashion also makes it easier not to forget to update one of the properties. When you decide do drop support for Safari 4 or whatever, you can simply search and replace the rules you want to remove from your CSS files.
Compare that to when we needed box model hacks, NS4, IE5/Mac fixes, and all of that crap.
This is not CSS3 specific, but as you are asking for a concise way to handle the styles and do mention modernizr (which works by adding classes like no-borderradius to your <html> element if that feature is not available), I thought it might be helpful for a generally improved way to organize your CSS.
There is LESS that allows the use of variables, mixins or nested rules in CSS (see the link for examples). This however requires you to compile your .less files into valid .css. To avoid this, there is/will be less.js (see also: Less.js Will Obsolete CSS) which enables you to include .less files directly in your page (useful at least during development).
I think LESS does not require you to learn a lot of new syntax rules and might help to organize fallback CSS right next to the "real" style.