Is it possible to use namespace interpolation in Less ?
#color: "yellow";
#top-yellow {
.square(#param) {
width: #param;
height: #param;
}
}
.example {
#top-#color; // Use of #top-yellow namespace
.square(10px);
}
Thanks !
Use parametric namespace instead (Notice namespaces and mixins are actually the same thing - i.e. the former is a purely logical abstraction).
#color: yellow;
#top(yellow) {
.square(#param) {
width: #param;
height: #param;
}
}
.example {
#top(#color); // use yellow #top namespace
.square(10px);
}
Related
I am refactoring a project's SCSS to map colors to their own variable in a _colors.scss file.
More often than not, I am encountering the situation in which a selector has a background-color and color. So, I end up writing the following variables:
$cool-table-bg: $brand-primary;
$cool-table-text: $white;
Pretty soon I end up with many, many versions of the above.
What I want to know is, can I assign the above to an object like you would do in JavaScript? For example:
$cool-table: {
bg: $brand-primary;
text: $white;
}
I'd like to be able to refer to such colors as $cool-table.bg.
Is this possible?
As Dan Gamble suggested, I’d definitely go for SASS maps. Write yourself some tools for color handling. Something like:
// define globally somewhere in your setup
$COLORS = ();
// use mixin to define colors groups by e.g. element name
// example: #include color-set(cool-table, bg, #ff0000);
// or pass in a map to define multiple colors at once
// example: #include color-set(cool-table, ( bg: #ff0000, border: #00ff00));
#mixin color-set($group-name, $color-name, $color-value: false) {
#if (type-of($color-name) == map) {
#each $name, $value in $color-name {
#include define-color($group-name, $name, $value);
}
}
#else {
#if(map-has-key($COLORS, $group-name)) {
$group: map-get($COLORS, $group-name);
}
#else {
$group: ();
}
$group: map-merge($group, ( $color-name: $color-value ));
$COLORS: map-merge($COLORS, ( $group-name: $group )) !global;
}
}
// access color values anywhere with this function by passing in
// element name and color identifier
// example: $bg-color: color-get(cool-table, bg);
#function color-get($group-name, $color-name) {
#if (map-has-key($COLORS, $group-name)) {
$group: map-get($COLORS, $group-name);
#if (map-has-key($group, $color-name)) {
#return map-get($group, $color-name);
}
}
#return false;
}
You can use maps. A good write up is here:
https://www.sitepoint.com/using-sass-maps/
To see the available functions you can go here and scroll down to map functions
I want to display list of vehicles from db in webgrid .but when i run code there comes error in view.chstml that "datasource must be bound" though i used correct model name and db name .
Model : Vehicles
public List<Vehicles> Listvehicle(string uid)
{
List<Vehicles> svehicle;
using (var session = MvcApplication.Store.OpenSession())
{
svehicle = (from vehc in session.Query<Vehicles>() where vehc.userid == uid select vehc).ToList();
}
return svehicle;
}
Controller
[HttpGet]
public ActionResult Listvehilce(string uid)
{
string userName = "ksundas7#gmail.com";
Register reg = new Register();
string userId = reg.userid(userName);
Vehicles vehcl = new Vehicles();
List<Vehicles> vehclist = vehcl.Listvehicle(userId);
vehclist.ToList();
// List<Vehicles> svehicle = WebGrid.Listvehicle(userId);
return View();
}
View
#model IEnumerable<MvcMembership.Models.Vehicles>
#{
ViewBag.Title = "Listvehicle";
}
<h2>Listvehilce</h2>
#{
var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 3, selectionFieldName: "selectedRow");
grid.Pager(WebGridPagerModes.NextPrevious);}
<style type="text/css">
.table { margin: 4px; width: 500px; background-color:#FCFCFC;}
.head { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.altRow { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.selectRow{background-color: #389DF5}
</style>
#grid.GetHtml(tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("vehicleid"),// format: (item) => item.GetSelectLink(item.vehicleid)),
grid.Column("Type", " Type"),
grid.Column("Make", "Make"),
grid.Column("Registration", "Registration"),
grid.Column("Colour", "Colour"),
grid.Column("Model", "Model")
))
Error:
A data source must be bound before this operation can be performed.
Anyone can tell me please what is reason of this error.
thanks in advance
Regards
You did not return the list in view.here is updated code.
[HttpGet]
public ActionResult Listvehilce(string uid)
{
string userName = "ksundas7#gmail.com";
Register reg = new Register();
string userId = reg.userid(userName);
Vehicles vehcl = new Vehicles();
List<Vehicles> vehclist = vehcl.Listvehicle(userId);
vehclist.ToList();
// List<Vehicles> svehicle = WebGrid.Listvehicle(userId);
return View(svehicle);
}
Did you check that the model is not null when it is being bound to the webgrid?
Also, you can change this part in the controller:
List<Vehicles> vehclist = vehcl.Listvehicle(userId);
vehclist.ToList();
with this
IEnumerable vehclist = vehcl.Listvehicle(userId);
List already implements the IEnumerable interface.
I need a check box to return nullable bool value. What should I do?
Is there any Tri State Check Box for Razer engine?
I found this question, but the link is not valid.
You could create a TriState class, a custom ModelBinder for this class, and the corresponding Display/Edit templates.
The TriState class should have a property to store the representation of the current state, it doesn't matter how: for example with an enum, with an int that can be -1, 0 or 1, or with a nullable bool bool?
The display template should simply show the state. I.e. it can show different images for the states, and perhaps an associated "label".
The edit template should show the state and have an script that allows to rotate the 3 states when clicked.
For example, the edit/display template could be implemented as a span with a text that would be used as a label for the state, and could have different CSS styles to show the image as a background image for the span. That would make it easy to change the image both in the server and in the client side scripts.
For the edit template, the span should also have:
a hidden field that stores the value in a way that the custom ModelBinder can recover (i.e. format as string to store the value, and parse the string to recover it)
an script that handles the click event for the span and changes the sate, i.e. that updates the value in the hidden field, as well as the style that shows the corresponding background image.
So you'd need:
TriState class
Custom ModelBinder for TriState class. Look here, or here.
Templates for display/edit. Read this blog: Brad Wilson: ASP.NET MVC 2 Templates
Syles to show the different images (define a background image and a padding so that the text doesn't overwrite the image). Besides, the style could change the cursor in the clickable version (editor template), and perhaps change the display on hover, to give the user a hint that the element is clickable.
Client side script to change the state (only for the editor template). For this script I'd recommend to add a "data-" attribute and attach it unobtrusively. See my answer to this question.
You could improve this by implementing three additional properties in the class to store the labels to show for the three states. This values could be added as extra "data-" attributes in the span, so that the client side script can change the label depending on the current state.
I posted a possible solution on dotnet/aspnetcore github and here for .NET core 3.1+
Here is a fiddle.
I implemented this simple component in .NET core 3.1+.
Here is a fiddle.
The css is from bootstrap, needed to display an empty box, a checked one and a box "full" to indicate the states 0,1,-1 (can change these values easily):
<style>
[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; }
.bootstrap-checkbox { display: inline-block; position: relative; width: 13px; height: 13px; border: 1px solid #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.bootstrap-checkbox i { position: absolute; left: -2px; top: -3px; }
.icon-stop { background-position: -312px -72px; }
.icon-check { background-position: -288px 0px; }
</style>
and this is the blazor component:
<div #ref=checkboxElement class="bootstrap-checkbox" #onclick="(e) => OnClick(e)"><i class="#ImgClass"></i></div>#Description
#code {
public ElementReference checkboxElement { get; set; }
[Parameter]
public string Description { get; set; }
[Parameter]
public bool? Checked { get; set; }
public string ImgClass { get; set; }
public int Value { get; set; }
protected override void OnInitialized()
{
Value = Checked switch { null => -1, true => 1, false => 0 };
ImgClass = Value switch { -1 => "icon-stop", 1 => "icon-check", _ => "" };
}
public void OnClick(MouseEventArgs e)
{
switch (ImgClass)
{
case "":
ImgClass = "icon-check";
Value = 1;
break;
case "icon-check":
ImgClass = "icon-stop";
Value = -1;
break;
case "icon-stop":
ImgClass = "";
Value = 0;
break;
}
}
}
I'm trying to create a mixin that will create a possibility to make category-depenedant colors in wordpress in no-time. It doesn't work, though. When I create try to make a .category-foo(#000000){} line in my style, it either isn't converted to .css or it does nothing. However, when I change the .category(...){} to .category-foo it STILL does not work when it's declared as .category-foo in the main style.
I'm asking now, is it even possible to create such a mixin in LESS that will allow me to add bonus variables depending on category name? Like .category-a(black), .category-b(white). That would really be a blessing for me.
.category(#catcolor : #white){
h2{color: #catcolor;}
a, .foo p, .foo a{color:#catcolor;
&:hover,&:active{color:lighten(#catcolor, 10%);}
}
img{.transition(background-color 0.8s ease-out);
&:hover,&:active{background-color:#catcolor;}
}
.featured-image{.transition(background-color 0.8s ease-out);
&:hover,&:active{background-color:#catcolor;}
}
::-moz-selection{background-color:#catcolor; color:#white;}
::selection{background-color:#catcolor; color:#white;}
}
It still seems like there may be two possibilities of what you are going for.
#1 Parent Category Selector
If I understand your comment correctly, you want to be able to add a category name to a selector that will also style the css within it based on that category class. If so, this is a reduced sample of your example:
LESS
//mixin defined
.category(#catName: a, #catColor: white) {
//add category name to selector
.category-#{catName} {
h2 {color: #catColor;}
a, .bar p, .bar a{color:#catColor;
&:hover,&:active{color:lighten(#catColor, 10%);}
}
}
}
//call it
.category(foo, blue);
CSS Output
.category-foo h2 {
color: #0000ff;
}
.category-foo a,
.category-foo .bar p,
.category-foo .bar a {
color: #0000ff;
}
.category-foo a:hover,
.category-foo .bar p:hover,
.category-foo .bar a:hover,
.category-foo a:active,
.category-foo .bar p:active,
.category-foo .bar a:active {
color: #3333ff;
}
#2 Category Specific Mixin CSS Generator
Perhaps you do not want an actual category class as your parent selector, but simply want to generate code based off a particular category name (perhaps even having that name be a class all of itself). If so, something like this nested mixin would work:
LESS
.category(#catName: a, #catColor: white) {
//This is common code used by all categories
//It has an example of using the category name to generate a class name
.categoryCommonCode() {
h2 {color: #catColor;}
a, .#{catName} p, .#{catName} a {color:#catColor;
&:hover,&:active{color:lighten(#catColor, 10%);}
}
}
//set up guarded mixins
.category(foo) {
.categoryCommonCode();
.specialFooOnlyClass {color: darken(#catColor, 20%);}
}
.category(bar) {
.categoryCommonCode();
.specialBarOnlyClass {color: darken(#catColor, 50%);}
}
//Call the appropriate nested mixin
.category(#catName);
}
//Call it
.category(foo, blue);
CSS Output
h2 {
color: #0000ff;
}
a,
.foo p,
.foo a {
color: #0000ff;
}
a:hover,
.foo p:hover,
.foo a:hover,
a:active,
.foo p:active,
.foo a:active {
color: #3333ff;
}
.specialFooOnlyClass {
color: #000099;
}
This is the first time I'm finding the & parent selector extremely useful so that I don't need to redefine parents simply to modify a child element.
Of course this is actually easy with LESS, but I have to ask!
<div id="skrollr-body" class="nonav">
<div class="skrollable">
</div>
</div>
#skroller-body {
.skrollable {
margin-top:40px;
.nonav & {
// this parent selector lets me modify
// .skrollable without duplicating it
margin-top:0px;
}
}
}
The output of .nonav & is
.nonav #skroller-body .skrollable
I'm wondering if I can get #skroller-body.nonav .skrollable instead somehow without extra HTML markup (a wrapper div.nonav)?
Currently I'll just duplicate the parent
#skrollr-body {
margin-top:40px;
left:0;
width:100%;
.skrollable {
margin-top:40px;
position:fixed;
z-index:100;
.skrollable {
position:absolute;
.skrollable {
position:static;
}
}
}
&.nonav {
.skrollable {
margin-top:0px;
}
}
}
Or to save redundant output;
#skroller-body.nonav .scrollable { margin-top:0px; }
But the whole point here is CSS code that's easy to maintain and read.
The docs tell us:
The & operator represents the parent selectors of a nested rule and
is most commonly used when applying a modifying class or pseudo-class
to an existing selector
So:
#skroller-body {
&.nonav {
.skrollable {
// stuff
}
}
}
}