.9-bucks {
font-size: 60px;
}
This is the error I am getting when I push my app to Heroku:
ActionView::Template::Error (Invalid CSS after ".": expected class name, was "9-bucks {"
2012-06-07T11:42:45+00:00 app[web.1]: (in /app/app/assets/stylesheets/application.css)):
CSS selector names (either IDs or class names) cannot begin with a number...
http://css-tricks.com/ids-cannot-start-with-a-number/
Try replacing with .nine-bucks { }
I dont think css class or ID names can start with a number. Have you tried using 'nine' instead of '9'?
W3C reference on naming classes in css and not using a number in the
first position of the class name. Best thing to do is to use only an
alpha character as the first letter in your class name (a-z). You can
then use numbers after that.
yes change your html - class="9-bucks" to class="nine-bucks"
and change css file - .nine-bucks{ // }
Related
I needed to create a function for some big color work on my Bootstrap variables. Unfortunately LESS doesn't allow you to create functions that can be called like theirs (ex. #myvar: darken(#color, 20%);).
The option provided on the doc site is to use a mixin that returns a variable. This worked well for me when I used it where the variable was declared as the property value, but I need to run my new mixin on many variables in the Bootstrap variable.less file. If I call the mixin multiple times there, it always returns the first color.
Part that works:
.mixin(#color) {
#var: #color;
}
.caller-1 {
.mixin(blue);
color:#var;
}
.caller-2 {
.mixin(red);
color:#var;
}
CSS
.caller-1 {
color:blue;
}
.caller-2 {
color:red;
}
What does not work:
.mixin(blue);
#color-1: #var; // My value is now blue
.mixin(red);
#color-2: #var; // My value is also blue
I thought I could get around this by building a unique variable in the mixin, but I can't find anyway to build one.
.mixin(#color; #num)
#var+#{num}: #color;
}
.mixin(blue; 1);
#color-1: #var1;
.mixin(red; 2);
#color-2: #var2;
Any idea on how to create a variable name in a mixin or other ideas on how to make one work like the LESS functions?
You can't define variables dynamically in LESS right now, but you can dynamically define selectors (as you probably knew). I will just give an example of that and leave it to you to apply it to the color/variables issue.
.towerMaker (#index) when (#index > 0) {
.block-#{index} {
z-index: #{index};
}
.towerMaker(#index - 1);
}
.towerMaker (7);
Variables are actually constants, and their scope is based only on context (where they appear in the block doesn't matter). It's only different when you call it within a selector block because of context. When you call the mixin at top-level, you define #var once for that level and it won't be overriden.
If you have to use variables, I suggest you try to find a solution taking advantage of the context. For example, you might be able to try something with mixin guards & when(condition) {...} (it's actually even simpler, as #seven-phases-max commented below). This is a way to run a mixin outside the context of a selector but still inside a context (updated example):
& {
.mixin(red);
.test1 { color: #var; }
}
& {
.mixin(blue);
.test1 { color: #var; }
}
You actually can define functions that will be called using Less by your Less runtime, but they can't be defined using Less. This is possible if you run your processor using Node.js, for example. But it's quite a hack and not trivial since you have to write them in JavaScript and wrap values in undocumented less.js types.
You can also call core JavaScript enclosing it within backticks (this is also undocumented). It's good for small blocks of code and for core functions:
length: unit(`Math.log(#{value})`, px);
If you run your Less processor from a Node.js app you can call your own functions that way.
I am trying to write a nested selector that selects a certain tag that has a certain attribute, for example
<li foo="bar">
To select this, li[foo="bar"] would work, but I want to nest it under [foo="bar"] using the scss & notation because I have other things with the [foo="bar"] attribute (e.g., <div foo="bar" class="baz">), and I want to group them together. When I try:
[foo = "bar"]{
&li{
...
}
&.baz{
...
}
}
It returns an error that says li may only be used at the beginning of a compound selector, and if I try:
[foo = "bar"]{
li&{
...
}
&.baz{
...
}
}
then it says & may only be used at the beginning of a compound selector. How can I do this correctly?
The right syntax nowadays would be li#{&}.
Last I heard, this is actually an upcoming feature in SASS 3.3 or 3.4.
See this thread for a question similar to yours and this thread for the proposed solution to be included (which, at the time of writing, seems to be &__element).
The issue here isn't the use of [] and & together - it's the use of a plain element in the selector. Your example with .baz should work as expected.
I am trying to save a selector in SASS for easier referencing later, however I get a syntax error.
Here's what I'm trying to do:
$icon: [class*="icon"];
You need to convert it to a string if you want to use it as a variable:
$icon: '[class*="icon"]';
#{$icon} {
// stuff
}
Like this
#ShuttleGrey: #606369;
I need same output color value from more variables [I am looking for a single line solution]
#themeOne:, #themeTwo:, #themeThree: #ShuttleGrey;
I know my code is an error , Does anyone know to fix this situation ?
Thanks
Assuming that you want the same properties to apply in many places you can do something like this
.aProperty{
color:#606369
}
Then you can do something like this to add the same properties to other elements
.anotherProperty{
background:#000; //just like that
.aProperty;
}
This way .anotherProperty will inherit the properties of aProperty.
This way you can even add other properties and use them at many places.
.aProperty{
color:#606369
}
Then you can do something like this to add the same properties to other elements
.anotherProperty{
background:#000; //just like that
.aProperty;
}
Since no answer is accepted I am trying my luck:)
I was having trouble with how an image is displaying and so I ran it through the W3C CSS validator and I received this code. I tried to search around for what it might mean but couldn't find much help. I found some people saying that it might be because of special characters in the CSS so I checked that in notepad ++ and didn't find anything.
2840 #whoweare img
Lexical error at line 2838, column 10. Encountered: " " (32), after : "#" post-9 #whoweare { width:100%; }
# post-9 #whoweare {
width:100%;
}
Line 2840 is the last one.
Any ideas what this might be?
Thanks for the help.
Remove the space between # and post-9 you have a descendant combinator between them.
#post-9 #whoweare {
width:100%;
}