Help with CSS required - New to CSS

HTML & CSS
1

Hi,

I read the below CSS code somewhere. I have tried this code in my HTML5 project in Netbeans, but it is giving errors. I have been searching the internet for the last 2 days to get an answer, but all in vein. Hence posting the question on this forum now. Hope someone will answer my query…

Thanks in anticipation !!


color:
    blockquote:	    "#666"
    headings:	    "#111"
    alt:	            "#666"
    box-bg:	    "#eee" 

/* Heading Elements
* ------------------------------------------------------------------ */
h1,h2,h3 {color: <%= @page.color['headings'] %>;}

pre{
    background: <%= @page.color['box-bg'] %>;
}
2

The code that you have posted is not CSS. It looks like a format that might be used by a preprocessor of some type, but it is not plain CSS.

3

Actually I was on the mac app store yesterday and was downloading BBEdit from there. This code was written on the screenshot of BBEdit. Code is complete in all sense as shown on the screenshot ( you can also check on the apple app store and type BBEdit in the search box ).

I assumed if BBEdit had a screenshot with this code, then this must be a usual CSS code that can be written in any other editor as well. Please check if this code is valid or not. If this is valid, then this can save a lot of lines of code in CSS where same attribute for multiple elements needs to be defined.

Thanks…

4

As Ron said what you posted is not css but some sort of script or pre-processor.

The code converted to css would roughly look like this:


.box-bg,pre{color:#eee}
blockquote{color:#666}
h1,h2,h3,h4,h5,h6{color:#111}

If you want to use variables and mixins then look at Less or [URL=“http://sass-lang.com/”]Sass.

5

Thanks for the reply…

6

Hi,

I am attaching the screenshot which shows that it is a CSS file on BBEDIT screenshot. Please check…

Waiting for your reply…

Thanks

7

Looks like it’s probably Sass, though I’ve never used it myself. (I say Sass because it’s using Ruby. The other preprocessors—Less and Stylus—use Node.js, I believe.)

Preprocessors let you use shorthand code like that, but you have to install the preprocessors to use them.

8

I guess you can continue calling it a CSS file if you choose, but that doesn’t make it a CSS file. Paul gave a comparison between the code in the BBEditor and the CSS that it should produce. A browser cannot interpret that code in the BBEdit file. It’s NOT CSS. Paul’s code can be interpreted by a browser. It IS CSS.

Google “CSS preprocessor” or something like that and see if it helps you understand the concepts. Ralph nailed it pretty well, though.

9

I’d like to thank all of you for taking out time to go through my post and clarify my thoughts and misunderstanding. I would definitely check out SASS and LESS documentation as well.

Once again a big thanks to all of you…

10