I just noticed a css rule that looked like this
width: ~"-moz-calc(100% - 10px)";
Now I know -moz-calc, but why is this a string and what is the meaning of the '~'?
That's actually LESS, a CSS preprocessor.
The ~"" syntax creates a literal value which doesn't process its contents as LESS.
Otherwise, it would try to compile -moz-calc() as a LESS function.
Related
Working on calc css function its work properly in browser and less file. But my text-editor shows error within css file.
This is the css file (I use VS code)
You don't define $gutter-horizontal anywhere, so its value cannot be used in the calculation. You need to initialise this variable with something like:
$gutter-horizontal: '12px';
Note that calc() will not work correctly with Sass, and to accommodate for this, you'll need to interpolate the variable:
width: calc((100% - #{$gutter-horizontal}) / 2)
Also, the vast majority of your CSS won't compile as you have pre-processed SASS in a .css file. You can convert it to regular CSS using an online tool such as SassMeister (or simply change the file extension to .scss, assuming your project can compile SASS).
your file is a css, your syntax it's for some preprocessor like sass or less
Is there a way to indent Sass' 3.3 mappings?
In scss we can write following:
$colors: (
header: #b06,
text: #334,
footer: #666777
)
But in Sass I cannot add any break into parentheses. I think that parentheses is required into mappings syntax.
$colors:
header: #b06
text: #334
footer: #666777
Syntax error: Illegal nesting: Nothing may be nested beneath variable declarations.
I tried some variances and nothing was compiled without errors.
To compile Sass I need to write it into one string like this:
$colors: (header: #b06, text: #334, footer: #666777)
But it is not indented syntax.
I think that will be a good walkthrough to write indented-only things into SCSS file and then import them.
There is number of issues with the indented syntax in SASS.
Unfortunately SASS syntax doesn't support Multi-line. Reading the documentation, there is only one exception, when it comes to multiple CSS selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the complete documentation here:
http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, there is no possibility to get multi-line support for an argument list in SASS.
This is a known issue and will not be addressed any time soon.
This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.
https://github.com/sass/sass/issues/1088
I'm testing stylus and I'm surprised that the compiler transforms almost everything I type like:
mivar = blackredgrenn
body
margin 0f
background-color #323242342332423123
werewers
color red
&:first-child
color mivar
whatever assa hj
into
body{margin:0 f;}
body background-color #323242342332423123 werewers{color:#f00;whatever:assa hj}
body background-color #323242342332423123 werewers:first-child{color:blackredgrenn}
Is this the way it should work? is there any option to make the compiler to stop and show error like in less? I'm compiling with grunt, is the common practice to run afterwards csslint to spot there the errors? what alternative do we have?
No, there is no option to show errors, as this code is not an error as Stylus sees it.
Stylus' syntax is very flexible now, and it is based on indents, this way you can't write some properties after other ones with an increased indent, as Stylus would interpret then the first part with lesser indent as a selector (that's what happens in your example), and as CSS could always get new properties, there is no list of “known” properies, so whatever is also printed as is.
If you're not sure you're writing a proper indented code, then the best option is either to use a linter to check CSS validity, or to write everything in CSS syntax using curly braces and semicolons.
Somewhere I saw this structure of CSS document:
header {
.navigation {
a {
text-decoration: none;
}
}
}
If I will try it in my CSS file, it doesn't work.
What is needed for ability to write this code?
Thank you
This looks like LESS CSS http://lesscss.org/
You have to import javascript file less.js into your page.
Now compile your css file and than apply Mr #ozkanozlu is right way
just do this
header {.navigation{a{text-decoration: none;}}}
The code you've quoted is not actually CSS, it is a language called LESS, which compiles to CSS; it is a CSS pre-processor. It is designed to make CSS easier to work with, but it needs to be converted to pure CSS before it will actually work in a browser.
LESS can be compiled to CSS before deployment -- ie so you work on LESS code, but the user sees standard CSS -- or provided to the browser as LESS, but with the less.js also compiler included in the page. For performance reasons, I would always prefer the first of those options.
Other similar languages also exist -- see SASS for example. You can see a comparison of SASS vs LESS here: http://css-tricks.com/sass-vs-less/
I've just started using SASS. Very impressed, however there is something I'd like to do but can't seem to find answer as whether or not it's possible.
I have a block of CSS that I don't want SASS to parse/compile but I would still like that block outputting to the final compiled CSS file. Is this possible?
Thanks.
My first ever SO question, normally provides the answer. Hope I've not missed it somewhere, tried every search term I could think of to find it.
Put it in a separate .css file and import it in your SASS file. File ending in .css are not parsed but are still included in the final output.
This question is a bit old, but, in the spirit of keeping things up-to-date:
The current version of SASS (3.4.22) does a pretty good job of only changing what it needs to. If what you've written is valid CSS, it should output as is.
The only times you should see SASS modifying your styles is if you've done something that looks like it's supposed to be modified. Based on their documentation, that would be things like:
Nesting styles
Concatenating strings
content: 'foo' + 'bar';
Using interpolation
left: calc(50% - #{$variable})
Using variables
width: $variable
Using #extend or nesting an #include
In most other situations, in my experience, SASS will happily spit out whatever you've written.
If you do need to output something that SASS insists on parsing when it doesn't need to, you can wrap the offending piece in quotes and remove them using the unquote function:
$family: unquote("Droid+Sans");
#import url("http://fonts.googleapis.com/css?family=#{$family}");
which compiles to
#import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Try to enclose your block in /* ..... */ in your scss file. Hope it helps.