I am fairly new to Less and I was just running through some of the simple concepts and found that when ever I use a parametric mixin, it doesn't compile to the CSS file.
Example, this is my style.less file:
#color: #000;
.boxshadow (#shadow:2px 2px 5px rgba(0,0,0,.4)) {
-webkit-box-shadow: #shadow;
-moz-box-shadow: #shadow;
box-shadow: #shadow;
}
.box{
.boxshadow;
color: #color;
}
and this my compiled style.css file:
.box {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
color: #000;
}
It's recognising the values on .boxshadow and carrying them through to .box, but it isn't compiling .boxshadow as it's own CSS class.
I have compiled with the command line and a Sublime Text 3 package, both outputting the same css.
Am I missing something simple?
Thanks in advance!
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
See here
Related
Sorry, I lost few years in IT )
So, here is my question:
I have a long ".css" file and a lot of structures like
color: #567567;
in it. So, Is here a metрod to use some construction like
color: $mycolor
or not?
PS: sorry for my English.. I drank a few years )))))))
This is not (yet) possible across all browsers in pure CSS, it's currently just an experimental technology (also see this compatibility table).
A way to achieve that is using tools like less or sass that support variables and then compile their files into pure CSS.
An example taken from the less website:
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
compiles to:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
I am using pie.htc to allow me to have radius corners and drop shadows on my website in old versions of IE.
The trouble is it seems to be making IE run very very slowly.
Here's an example of my code... can anyone see how I can improve this?
div.myDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
}
I used CSS3Pie a lot in projects, because I was forced to make the sites exactly look alike which of course is nonsense in for a technician, but not a sales guy.
Actually, using any kind of .htc files is very slow because pie needs to parse these rules and create according VML-Elements to emulate the according css3-behaviour. If you have bigger projects you will have no choice other than:
Completely omitting CSS3-features for IE8 (and convince your salesguy) <- my favorite option
Omitting pie and using IE filters wherever possible
using a more lightweight framework with lesser support but faster processing, because PIE is (because it has such a superb support) quite bloated and thus rather slow
Using positions like Razor adviced does not really fix the speed issue and prefixing with -ms might give you serious trouble in IE9 trying to use both, css3pie and the prefixed css3-property.
try this for a change
div.myDiv
{
border-radius: 5px;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
position:relative;
}
PIE.htc file loads asynchronously along with DOM when it is ready. Setting the position:relative can certainly give you an edge. i prefix -ms- in code snippet which helps to detect IE. it worked for me. i used latest PIE.htc file.
I have this following warning:
00:48:06.843 [WARN] [XXXX] Line 71 column 11: encountered ":".
Was expecting one of: "}" "+" "-" "," ";" "/" <STRING> <IDENT> <NUMBER> <URL> <PERCENTAGE> <PT> <MM> <CM> <PC> <IN> <PX> <EMS> <EXS> <DEG> <RAD> <GRAD> <MS> <SECOND> <HZ> <KHZ> <DIMEN> <HASH> <IMPORTANT_SYM> <UNICODERANGE> <FUNCTION>
In line 71 I have the following line
<ui:style>
...
.menuPopup {
position:absolute;
top: 5px;
right: -80px;
width:100px;
background-color: #F2F2F2;
-moz-box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.5);
box-shadow:-1px 2px 5px 1px rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',Direction=135, Strength=3);
}
</ui:style>
When i remove the filter: progid:... line it works fine.
Does GWT have a problem with the filter attribute?
filter does not follow the CSS grammar, so you have to use the literal() function of GWT's CssResource:
filter: literal("progid:DXImageTransform.Microsoft.Shadow(color='#888888',Direction=135, Strength=3)");
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}