我在根中定义了一种颜色：
:root {
--purple: hsl(266, 35%, 70%);
}
我正在尝试在SASS函数中使用它以使其具有透明度：
.purple {
background: transparentize(#{"var(--primary-color)"}, 0.7)
}
有人知道让它起作用的方法吗？还是只是不可能？
答案 0 :(得分：3)
可以在：root伪类的元素外部定义全局变量：
:root {
--color-background: #FFFFFF;
}
您可以定义如下函数：
@function color($color-name) {
@return var(--color-#{$color-name});
}
并将其调用到您的无聊中
body {
color: color(primary);
}
编译的sass代码是：
body {
color: var(--color-primary);
}
答案 1 :(得分：1)
我的解决方案是将十六进制代码颜色转换为HSL。首先，我创建了一个PHP函数。
Option Explicit
Private Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)
Sub ConvertDocs()
Dim fs As Object
Dim oFolder As Object
Dim tFolder As Object
Dim oFile As Object
Dim strDocName As String
Dim intPos As Integer
Dim locFolder As String
Dim fileType As String
Dim office2007 As Boolean
Dim lf As LinkFormat
Dim oField As Field
Dim oIShape As InlineShape
Dim oShape As Shape
On Error Resume Next
locFolder = InputBox("Enter the path to the folder with the documents to be converted", "File Conversion", "C:\myDocs")
If Application.Version >= 12 Then
office2007 = True
Do
fileType = UCase(InputBox("Enter one of the following formats (to convert to): TXT, RTF, HTML, DOC, DOCX or PDF", "File Conversion", "TXT"))
Loop Until (fileType = "TXT" Or fileType = "RTF" Or fileType = "HTML" Or fileType = "PDF" Or fileType = "DOC" Or fileType = "DOCX")
Else
office2007 = False
Do
fileType = UCase(InputBox("Enter one of the following formats (to convert to): TXT, RTF, HTML or DOC", "File Conversion", "TXT"))
Loop Until (fileType = "TXT" Or fileType = "RTF" Or fileType = "HTML" Or fileType = "DOC")
End Select
Application.ScreenUpdating = False
Set fs = CreateObject("Scripting.FileSystemObject")
Set oFolder = fs.GetFolder(locFolder)
Set tFolder = fs.CreateFolder(locFolder & "Converted")
Set tFolder = fs.GetFolder(locFolder & "Converted")
For Each oFile In oFolder.Files
Dim d As Document
Set d = Application.Documents.Open(oFile.Path)
' put the document into print view
If fileType = "RTF" Or fileType = "DOC" Or fileType = "DOCX" Then
With ActiveWindow.View
.ReadingLayout = False
.Type = wdPrintView
End With
End If
' try to embed linked images from fields, shapes and inline shapes into the document
' (for some reason this does not work for all images in all HTML files I've tested)
If Not fileType = "HTML" Then
For Each oField In d.Fields
Set lf = oField.LinkFormat
If oField.Type = wdFieldIncludePicture And Not lf Is Nothing And Not lf.SavePictureWithDocument Then
lf.SavePictureWithDocument = True
Sleep (2000)
lf.BreakLink()
d.UndoClear()
End If
Next
For Each oShape In d.Shapes
Set lf = oShape.LinkFormat
If Not lf Is Nothing And Not lf.SavePictureWithDocument Then
lf.SavePictureWithDocument = True
Sleep (2000)
lf.BreakLink()
d.UndoClear()
End If
Next
For Each oIShape In d.InlineShapes
Set lf = oIShape.LinkFormat
If Not lf Is Nothing And Not lf.SavePictureWithDocument Then
lf.SavePictureWithDocument = True
Sleep (2000)
lf.BreakLink()
d.UndoClear()
End If
Next
End If
strDocName = d.Name
intPos = InStrRev(strDocName, ".")
strDocName = Left(strDocName, intPos - 1)
ChangeFileOpenDirectory(tFolder)
' Check out these links for a comprehensive list of supported file formats and format constants:
' http://msdn.microsoft.com/en-us/library/microsoft.office.interop.word.wdsaveformat.aspx
' http://msdn.microsoft.com/en-us/library/office/bb238158.aspx
' (In the latter list you can see the values that the constants are associated with.
' Office 2003 only supported values up to wdFormatXML(=11). Values from wdFormatXMLDocument(=12)
' til wdFormatDocumentDefault(=16) were added in Office 2007, and wdFormatPDF(=17) and wdFormatXPS(=18)
' were added in Office 2007 SP2. Office 2010 added the various wdFormatFlatXML* formats and wdFormatOpenDocumentText.)
If Not office2007 And fileType = "DOCX" Then
fileType = "DOC"
End If
Select Case fileType
Case Is = "TXT"
strDocName = strDocName & ".txt"
d.SaveAs(FileName := strDocName, FileFormat := wdFormatText)
Case Is = "RTF"
strDocName = strDocName & ".rtf"
d.SaveAs(FileName := strDocName, FileFormat := wdFormatRTF)
Case Is = "HTML"
strDocName = strDocName & ".html"
d.SaveAs(FileName := strDocName, FileFormat := wdFormatFilteredHTML)
Case Is = "DOC"
strDocName = strDocName & ".doc"
d.SaveAs(FileName := strDocName, FileFormat := wdFormatDocument)
Case Is = "DOCX"
strDocName = strDocName & ".docx"
' *** Word 2007+ users - remove the apostrophe at the start of the next line ***
'd.SaveAs(FileName := strDocName, FileFormat := wdFormatDocumentDefault)
Case Is = "PDF"
strDocName = strDocName & ".pdf"
' *** Word 2007 SP2+ users - remove the apostrophe at the start of the next line ***
'd.ExportAsFixedFormat(OutputFileName := strDocName, ExportFormat := wdExportFormatPDF)
End Select
d.Close
ChangeFileOpenDirectory(oFolder)
Next oFile
Application.ScreenUpdating = True
End Sub
它将收到示例代码＃cc66cc的十六进制代码颜色，并将返回H，S和L的3个值的数组。
function hexToHsl($hex) {
$hex = str_split(ltrim($hex, '#'), 2);
// convert the rgb values to the range 0-1
$rgb = array_map(function($part) {
return hexdec($part) / 255;
}, $hex);
// find the minimum and maximum values of r, g and b
$min = min($rgb);
$max = max($rgb);
// calculate the luminace value by adding the max and min values and divide by 2
$l = ($min + $max) / 2;
if ($max === $min) {
$h = $s = 0;
} else {
if ($l < 0.5) {
$s = ($max - $min) / ($max + $min);
} elseif ($l > 0.5) {
$s = ($max - $min) / (2 - $max - $min);
}
if ($max === $rgb[0]) {
$h = ($rgb[1]- $rgb[2]) / ($max -$min);
} elseif ($max === $rgb[1]) {
$h = 2 + ($rgb[2]- $rgb[0]) / ($max -$min);
} elseif ($max === $rgb[2]) {
$h = 4 + ($rgb[0]- $rgb[1]) / ($max -$min);
}
$h = $h * 60;
if ($h < 0) {
$h = $h + 360;
}
}
return array($h, $s*100, $l*100);
}
然后分配给变量CSS。
$color_main_hsl = hexToHsl($color_main);
$color_main_h = $color_main_hsl[0];
$color_main_s = $color_main_hsl[1] . '%';
$color_main_l = $color_main_hsl[2] . '%';
然后我在SASSS中创建2个函数，其中1个用于变暗，而其他一些则变亮：
<style>
:root {
--color_1: <?php echo $color_main; ?>;
--color_1_h: <?php echo $color_main_h; ?>;
--color_1_s: <?php echo $color_main_s; ?>;
--color_1_l: <?php echo $color_main_l; ?>;
}
</style>
最后我使用我的sass函数：
// hsl css variable darken
@function hsl_d($color_num, $percentage) {
$color_h: var(--color_#{$color_num}_h);
$color_s: var(--color_#{$color_num}_s);
$color_l: var(--color_#{$color_num}_l);
@return hsl($color_h, $color_s, calc(#{$color_l} - #{$percentage}#{'%'}));
}
// hsl css variable lighten
@function hsl_l($color_num, $percentage) {
$color_h: var(--color_#{$color_num}_h);
$color_s: var(--color_#{$color_num}_s);
$color_l: var(--color_#{$color_num}_l);
@return hsl($color_h, $color_s, calc(#{$color_l} + #{$percentage}#{'%'}));
}
数字“ 1”是因为我的变量ara称为--color_1，-color_1_h，-color_1_s，-color_1_l，而我的函数会对该数字进行插值。第二个参数是亮或暗的百分比。
我希望我有所贡献：）
答案 2 :(得分：0)
先执行SASS转译，所以最好先设置SASS变量，然后与--css_variables连接。
要实现这一点，您需要在此示例中@use "sass:meta";：
@use "sass:meta";
//sass variable
$primarySassVariable: #4252af;
//css variable
:root {
--primary: #{meta.inspect($primarySassVariable)};
}