You can pass css values from html: <button style=” –tooltip-string: ‘Ug. Tooltips.’; –tooltip-color: #f06d06; –tooltip-font-size: 11px; –tooltip-top: -10px”> Button </button> to css: button::after { content: var(–tooltip-string); color: var(–tooltip-color); font-size: var(–tooltip-font-size); } source: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ codepen: https://codepen.io/chriscoyier/pen/EbxVME
Referring to LESS documentation (http://lesscss.org/#client-side-usage): Link your .less stylesheets with the rel set to “stylesheet/less”: <link rel=”stylesheet/less” type=”text/css” href=”https://stackoverflow.com/questions/18335299/styles.less” /> Then download less.js from the top of the page, and include it in the <head> element of your page, like so: <script src=”https://stackoverflow.com/questions/18335299/less.js” type=”text/javascript”></script> Make sure you include your stylesheets before the script. This method … Read more
Update: LESS >= 1.6 As of version 1.6 (see changelog) property name interpolation is implemented in LESS. So you don’t need any magic anymore. (For older versions, see my original answer.) Your mixin would work basically as is: LESS: .vendor(@property; @value){ -webkit-@{property}: @value; -moz-@{property}: @value; -ms-@{property}: @value; -o-@{property}: @value; @{property}: @value; } /*example*/ .test { … Read more
Just multiply by 1 in the sign and units you want. So: .sprite-size(@width, @height, @x, @y) { width: @width*1px; t: @height*1px; background: @sprites no-repeat @x*-1px @y*-1px; }
To supply a parameter that far down the string of arguments, you have to also supply the expected variable it is to define. So this: .fontStyle(‘NimbusSansNovCon-Reg’, 12px, @letter-spacing: 0.1em); Produces this (note how color, font-weight, and font-style used the defaults): font-family: ‘NimbusSansNovCon-Reg’; font-size: 12px; color: #ffffff; font-weight: normal; font-style: normal; letter-spacing: 0.1em;
You could attempt to take a different approach, try to write your selectors as small (low specificity) as possible. and only make them more specific when needed. With that way of working you don’t need a tool.
If you don’t want to use GUI to compile LESS on Windows, there is a clean way to get lessc command on Windows command line. It only requires you to install node.js, which is required by original lessc anyway. So, install node.js (http://nodejs.org/) and install “less” module for node.js. The latter provides lessc executable (lessc.cmd … Read more
If your bundling your scripts and CSS then assets like images may not be found. In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform: bundles.Add(new StyleBundle(“~/Content/css/bootstrap”).Include(“~/Content/bootstrap.min.css”, new CssRewriteUrlTransform())); Include in _Layout.cshtml: @Styles.Render(“~/Content/css/bootstrap”) Everything should be good. And yes, viewing what’s happening over the network to see what URL is generating the 404s will help. EDIT: … Read more
Edit: This answer is definitely outdated for current versions of next.js, check the other answers below. After multiple hours of research I found now finally the right solution and wanted to share it: .babelrc (no magic here) { “presets”: [“next/babel”], “plugins”: [ [ “import”, { “libraryName”: “antd”, “style”: true } ] ] } next.config.js: /* … Read more
Bootstrap 3.0 moved to a “mobile first” approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you’re left with a fluid layout by default. for example, to have a two-column fluid layout, simply use: <body> <header>…</header> <div style=”padding:0 15px;”><!– offset row negative padding … Read more