Is there any way at all to accomplish this now?
I see rule-nested-empty-line-before has been removed for some reason, so is this config no longer possible?
I want this to throw errors...
#media (max-width: 300px) {
.foo {
display: block;
}
}
#media (max-width: 600px) {
.bar {
display: block;
}
}
There should be a space before #media since it's not nested, and no space before .foo since it's nested.
The rule-nested-empty-line-before and rule-non-nested-empty-line-before rules were combined together to form the new rule-empty-line-before rule in version 8.0.0. You can use this rule to control the empty lines before the .foo {} and .bar {} rules.
#media is an at-rule, so you should use the at-rule-empty-line-before rule to control the empty lines before it.
You can learn about how rules are named and how they work together in this section of the User Guide.
There should be a space before #media since it's not nested, and no space before .foo since it's nested.
With the above in mind, the configuration for that should be:
{
"rules": {
"at-rule-empty-line-before": ["always"],
"rule-empty-line-before": ["always", {
except: ["first-nested"]
}]
}
}
Alternatively, you can use stylelint-standard-config, which has sensible defaults for stylistic rules.
Related
I have icon classes that contain the background-image and background-size properties. I want to protect the names of these classes with the prefix .icon. Then I can start writing out .icon.profile, .icon.search etc. selectors. If it were .icon .profile, .icon .search etc., then I could use embedding is SCSS to neatly protect namespace. However embedding won't work for multiple class selectors, because it selects child nodes. Once I use SCSS, it feels unintelligent to write out the prefix every time. To use embedding in DOM to support embedding in SCSS is an overkill and expensive ( adds unnecessary complexity of DOM elements ).
Is there a way to add "namespace" to classes that compile to multiple class selectors.
//////////////////////////////////////////////////////////////
// icons
.icon.search {
background-image: url(...);
background-size: cover;
}
.icon.profile {
background-image: url(...);
background-size: cover;
}
//////////////////////////////////////////////////////////////
If I understand your problem correctly, what you are looking for is the parent selector &:
.icon {
&.search {
background-image: url(...);
background-size: cover;
}
&.profile {
background-image: url(...);
background-size: cover;
}
}
I had been developed a custom block 'Colleges', along with a stylesheet: styles.css within the block.
by using moodle2.8+
styles.css
.block_colleges .header { display:none; }
.block_colleges .title h2 { color:#fff; font-size:18px; font-weight:bold; margin:-5px; }
.block_colleges { float:left; margin-left:5px; width:317px !important; }
.block_colleges .content { border:1px solid lightgray; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; margin-top:0px; border:0px solid #a6c9e2; padding:0px; min-height:220px; }
The above css should be applicable for only students and teachers...and for admin, the css shouldn't be applicable i.e., a moodle block format design.
Can we create block::custom css, different for student/teacher and admin.
A file named styles.css in the main directory of a Moodle block will automatically be cached and used on the page. There's no way to load different CSS based on role that I know of.
If you want to show different CSS for different roles, perhaps you can have role specific CSS classes, then change the classes in your markup based on the logged in user's role.
For example:
#block_colleges.student .header { display:**none**; }
#block_colleges.teacher .header { display:**block**; }
In your block_colleges.php file, you could write something like:
if (is_siteadmin())
{
// class = admin
}
else
{
// class = student
}
This is how I would do it.
I am trying to import bootstrap.css into a .less file, so that I can conditionally apply Bootstrap styles with media-queries.
Here is my LESS code:
// Visual Studio is saying "Couldn't locate" the file for both, yet they are there:
#import url("bootstrap.min.css");
#import url("bootstrap-theme.min.css");
// ...can't find the source of the "#screen" at-rules:
#extra-small: ~"screen and (max-width: #screen-xs-max)";
#small: ~"screen and (min-width: #screen-sm-min) and (max-width: #screen-sm-max)";
#medium: ~"screen and (min-width: #screen-md-min) and (max-width: #screen-md-max)";
#large: ~"screen and (min-width: #screen-lg-min)";
footer {
text-align: center;
// ...doesn't like the comma "or" syntax here, so "or" is used instead:
#media #extra-small or #small {
#linkedin-flair {
.hide // compile error
}
#stackoverflow-flair {
.hide // compile error
}
}
#media #medium {
#linkedin-flair {
.col-sm-3 // compile error
}
#copyright-text {
.col-sm-6 // compile error
}
#stackoverflow-flair {
.col-sm-3 // compile error
}
}
#media #large {
#linkedin-flair {
.col-sm-4 // compile error
}
#copyright-text {
.col-sm-4 // compile error
}
#stackoverflow-flair {
.col-sm-4 // compile error
}
}
}
...the LESS is having trouble with the #import and #screen at-rules, and with referencing any Bootstrap classes such as .hide.
I am using Visual Studio 2013, Web Essentials 2013, and Bootstrap 3.
1) You should prefer to download Bootstrap's LESS files and import them with #import "bootstrap.less". If you can't follow #seven-phases-max 's links and use #import (less) bootstrap.min.css
2) "// ...can't find the source of the "#screen" at-rules:" these rules are not defined in Bootstrap's LESS files. The code from the docs illustrate the boundaries of the grid defined by Bootstrap. It will show you what happens if you change the variables mentioned.
For example take a look to grid.less which defines:
#media (min-width: #screen-sm) {
width: #container-sm;
}
Also read: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ and LESS variables in #media queries i don't think you solution won't work cause:
#screen-lg: 992px;
#large: ~"screen and (min-width: #screen-lg)";
#media #large{ color: red; }
compiles to:
#media screen and (min-width: #screen-lg) {
color: red;
}
NB #screen-lg not set.
3) " .hide // compile error" there is no mixins called hide
You could use mixins from responsive-utilities.less (see also: http://getbootstrap.com/css/#responsive-utilities)
In your case you will get something like:
//example DO NOT compile to useful CSS
#import (reference) "bootstrap.less";
#linkedin-flair
{
&:extend(.hidden-xs);
&:extend(.hidden-sm);
}
4) " .col-sm-4 // compile error" .col-sm-4 is dynamical generate (grid.less) you can't use it as a mixin.
use:
#stackoverflow-flair {
.make-sm-column(4);
}
I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.
Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Actually, the class that defined last in the css - is applied on your div.
check it out:
red last in css
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
vs
blue last in css
.red { color: red; }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
If you asking about they have same property then as per the CSS rule it's take the last statement.
<div class="red green"></div>
CSS
.red{
color:red;
}
.green{
color:green;
}
As per the above example it's take the last statement as per css tree which is .green.
The class that is defined last in the CSS have priority, if nothing else applies.
Read up on CSS priority to see how it works.
Many classes can be assigned to an element, you just separate them with a space
<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>
Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.
So if you have
.myClass
{
background: white;
color: blue;
}
.keepOnClassing
{
color: red;
}
The red color will be used, but not the background color as it was not overwritten.
You must also take into account CSS specificity, if you have a more specific selector, this one will be used:
.myClass
{
background: white;
color: blue;
}
div.myClass.keepOnClassing
{
background: purple;
color: red;
}
.stayClassySanDiego
{
background: black;
}
The second selector here will be used as it is more specific.
You can take a look at it all here.
Thank you very much in advance for the help.
I've built a website and now I'm trying to uptimise it for the iPhone.
I have problems with one page in particular: broken link to external site.
The contact telephone numbers are white. But in the iPhone they are green. I've included an screen shot. As you can see the numbers are green (#029547).
I tried to create some css only for the iphone, but still they're green.
I'm obviously missing something but I can't see what.
Information:
The broken link to css file.
Line 444: '.style2'
Lines 707 and 708 contains the css only for the iPhone: '.style2' and'.style2 p'
Cheers!
UPDATE:
Adrian, thank you very much for point out that the media declarations were wrong.
I fixed it but the problem still persists.
UPDATE 2:
Screenshot:
Solved:
It was the 'a' attribute in the line line 123.
Yes, that's right. The a attribute was overriding the .style2 p attribute. WEIRD!!!
I fixed the problem adding:
#media only screen and (max-device-width: 640px) {
.style2 a {color: white;}
}
The max-width in the #media definition is wrong!
// line 695 on:
#media only screen and (max-width: 1200px) {
/* Style adjustments for viewports 480px and over go here */
header {
height: 90px;
background: #A3CE4B url('i/header_bg.jpg') top right no-repeat;
}
.page_width_1 {width: 1040px;}
.ribbon_left {height: 164px;}
.ribbon_right {height: 164px;}
.style2 {color: white;}
.style2 p {color: white;}
input {width: 197px;}
.date p {margin: 5px 35px 0 0;}
}
Try removing the color declaration from default.css:144:
p {font-size: 1.4em; color: #736E74;}